Question

过去4天我一直在寻找一个关于这个话题的好方法，但是找不到。更糟;我无法想象我正在努力实现的目标。

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

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

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

修改

以下来自Quasimodo的克隆和yuriy636的评论让我朝着正确的方向前进。用术语搜索后我找到了这个页面： https://cartjs.org/

第二个例子正是我所寻找的。但是我无法提出评论，但我确实愿意为两个人提供帮助以帮助我！

Answer 1

我听说过无限列表和无限滚动一词，维基百科使用＆＃39; 懒惰或延迟评估＆＃ 39;：https://en.wikipedia.org/wiki/Lazy_evaluation#Delayed_evaluation

Answer 2

你的问题很模糊，但我认为我在下面所做的事情至少可以推动你朝着正确的方向前进。

假设你有这样的东西 - 一个div来保存你的搜索结果，每个div都是它自己的div result，另一个div来保存'move'：

<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

我不确定你在实际数据检索等方面的位置，但是我认为如上所述淘汰前端可能对你有用。

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

2 个答案: