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

Question

在过去的 4 天里，我一直在寻找有关此主题的好方法，但找不到任何方法。更糟糕;我无法很好地描述我想要实现的目标。

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

我想做的事： 有一个带有搜索框的页面，用于查询我的数据库中的对象并将结果显示到下面的 div 元素中。每次用户进行新搜索时，该 div 元素中的结果都会发生变化。但是，如果用户单击“添加到”按钮，则对象必须从search_results div 元素移动到同一页面上的另一个 div 元素，其中还列出了所有先前选择的元素。然后，用户可以从列表中删除对象或更改对象的值，例如金额。

就像我说的；我一直在拔头发，因为我找不到它......我现在感觉真的很愚蠢:(有人知道这种功能的技术名称是什么吗？

编辑

下面来自 Quasimodo 的克隆和 yuriy636 的评论将我推向了正确的方向。用那里的术语搜索后，我发现了这个页面： https://cartjs.org/

第二个例子正是我想要的。但是，我无法对评论进行投票，但我确实想感谢这两个帮助我的人！

Answer 1

我听说过无限列表和无限滚动这个词，维基百科使用'惰性或延迟评估'：https://en.wikipedia.org/wiki/Lazy_evaluation#Delayed_evaluation

Answer 2

你的问题很模糊，但我认为我在下面所做的至少可以将你推向正确的方向。

假设你有这样的东西 - 一个 div 来保存你的搜索结果，每个都是它自己的 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

我不确定您在实际数据检索等方面处于什么位置，但是我认为像上面那样淘汰前端可能对您有用。