Javascript 在div内显示搜索结果并添加新结果

在过去的4天里，我一直在寻找一个关于这个话题的好方法，但没有找到。更糟糕的是；我想不出一个很好的描述我正在努力实现的目标

例如，Dropbox具有我希望在自己的网站上实现的功能。如果你登录dropbox，你可以上传文件。当您逐个上载文件时，UI会将结果（文件名、位置等）堆叠到div元素中。还有其他网站也这样做；例如，当您搜索一个域并单击“添加到购物车”时，您会看到该域显示在右侧，您可以选择将其删除

我想做的是： 有一个带有搜索框的页面，用于查询我的数据库中的对象，并将结果显示在下面的div元素中。每次用户进行新的搜索时，该div元素中的结果都会更改。但是，如果用户单击“添加到”按钮，则对象必须从

搜索结果

div元素移动到同一页面上的另一个div元素，其中也列出了以前选择的所有元素。然后，用户可以从列表中删除对象或更改对象的值，如金额

就像我说的；我一直在拔头发，因为我找不到。。。我现在觉得自己真的很愚蠢：（有人知道这种功能的技术名称吗

编辑

下面来自卡西莫多的克隆人和yuriy636的评论将我推向了正确的方向。使用这些术语搜索后，我找到了此页面：

---

第二个例子正是我想要的。然而，我无法对评论进行投票表决，但我愿意对这两个例子给予赞扬，因为它们都帮助了我！

我听说过无限列表和无限卷轴这两个词，维基百科使用了“懒惰或延迟评估”：

你的问题很模糊，但我认为是什么我在下面所做的工作至少可以推动你朝着正确的方向前进

假设你有这样的东西-一个用来保存搜索结果的div，每个div都是它自己的div，class

result

，还有一个单独的div来保存“移动”的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>

它正在发挥作用：

---

我不确定您在实际的数据检索等方面处于什么位置，但是我认为，如上所述删除前端可能会对您有所帮助。

向我们展示您的尝试。Olso将帮助您处理projectDOM，AJAX？我真的认为没有“功能性”所有这些的名称。听起来像是一个完整的webapp。你必须将你想要的分成几个部分：首先是搜索部分，你可以用AJAX来完成（你请求服务器，然后附加结果）。然后是购物车，你可以用jQuery来做这件事，可能是克隆结果元素。对于前端。对于后端，你必须设计数据库，然后是响应AJAX的代码（可能是JSON，以便于操作）@RafaelShkembi别开玩笑了，我知道jquery很棒，而且做了所有的事情，但是没有必要对像imo这样的模糊问题进行笼统的陈述。因为这是对我问题的正式回答，带有一个有效的代码示例；我会把这一个作为正确答案：-）@Robber不太感谢！祝你好运

$(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
    });
});