在div內顯示搜索結果並添加新的結果

-3

我一直在尋找一個很好的如何在這個話題的最後4天，找不到任何。更糟;我無法想象我想要達到的目標。在div內顯示搜索結果並添加新的結果

例如Dropbox具有我想在我自己的網站上實現的功能。如果您登錄到Dropbox，您可以上傳文件。當你逐個上傳文件時，用戶界面將結果（文件名，位置等）疊加到div元素中。還有其他網站也這樣做; Namecheap，例如，當您搜索域名並點擊添加到購物車時，您會看到該域名顯示在右側，您可以在其中刪除該域名。

我想要做的事：有一個搜索框查詢我的數據庫的對象，並顯示結果到下面的div元素的頁面。每當用戶進行新的搜索時，該div元素的結果都會改變。但是，如果用戶點擊'添加到'按鈕，對象必須從div元素移動到同一頁面上的另一個div元素，其中也列出了所有先前選擇的元素。然後用戶可以從列表中刪除對象或更改對象的值（如金額）。

就像我說的;我一直在拉我的頭髮，因爲我無法找到它......我感覺真的很愚蠢，現在:(有誰知道這樣的功能technicall名字是？

編輯

下面從卡西莫多的克隆和yuriy636的評論把我推在正確的方向有術語搜索後，我找到了這個網頁：。 https://cartjs.org/

第二個例子正是我一直在尋找但我不能來upvote一個評論，但我確實喜歡給予這兩個信貸幫助我！

來源

2016-07-30 Robbert

告訴我們你有什麼嘗試。 Olso [jquey]（https://jquery.com/）將幫助您完成項目 –

DOM操作，AJAX？ –

我真的不認爲有一個「功能」名稱的所有。聽起來像一個完整的Web應用程序。你必須將你想要的東西分解成組件：首先搜索部分，你可以用AJAX做這件事（你請求服務器然後附加結果）。然後，購物車，你可以用jQuery來做到這一點，克隆結果元素也許。那爲前端。對於後端，您必須設計數據庫，然後設計響應AJAX的代碼（爲了更容易操作，可以使用JSON）。 – yuriy636

你的問題是相當模糊的，但我想我已經做了以下可至少讓你朝正確的方向發展。

比方說，你有這樣的事情 - 一個div來保存你的搜索結果，每個都是它自己的分度result類，和一個單獨的div來保持「移動」的：

<div id="searchResults"> 
    <div class="result">This is one search result.</div> 
    <div class="result">This is another result.</div> 
</div> 

<div id="chosenResults"></div>

現在，我們可以使用jQuery把在「移動」功能：

$(document).ready(function() { //On page load 
    $('.result').click(function() { //When element with class "result" is clicked 
     $(this).detach().appendTo('#chosenResults'); //Remove it form the results list, add it to the other 
    }); 
});

這是在行動：http://codepen.io/anon/pen/GqBxEp

我不確定你在哪裏關於實際的數據檢索等，但我想敲出前端，因爲我有以上可能對你有用。

來源

2016-07-30 20:15:36 Santi

由於這是對我的問題的正式答案，可以使用有效的代碼示例;我會贊成這一個作爲正確的答案:-) – Robbert

@Robbert非常感謝！祝你好運。 – Santi

我聽說過這個詞無限列表和無限滾動，維基百科使用「懶惰或推遲評估」：https://en.wikipedia.org/wiki/Lazy_evaluation#Delayed_evaluation

來源

2016-07-30 20:08:55 user2182349

在div內顯示搜索結果並添加新的結果

回答

相關問題