在div中显示搜索结果并添加新结果 [英] Display search results inside div and add new results

问题描述

在过去的4天里，我一直在寻找一个很好的方法来解决这个问题，但找不到任何方法.甚至更糟;我无法很好地描述我要实现的目标.

I've been looking for a good how to on this topic for the last 4 days and could not find any. Even worse; I'm not able to think of a good description of what I'm trying to achieve.

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

For example Dropbox has the functionality of what I would like to implement on my own website. If you login into dropbox you can upload files. When you upload files one by one the UI stacks the results (filename, location, etc.) into a div element. There are other websites who also do this; Namecheap, for example, when you search for a domain and click add to cart you see the domain show up on the right side, where you have the option to delete it.

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

What I would like to do: Have a page with a search box that queries my database for objects and displays the results into a div element below. Everytime the user does a new search the results in that div element will change. But if the user clicks on the 'add to' button the object must move from the search_results div element to another div element on the same page where all the previous selected elements are also listed. The user is then able to delete the object from the list or alter the values of the object such as the amount.

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

Like I said; I've been pulling my hair out because I cannot find it... I'm feeling really stupid right now :( Does anybody know what the technicall name of such a functionality is?

编辑

下面来自Quasimodo的克隆和yuriy636的评论将我推向正确的方向.在搜索了术语之后，我找到了以下页面: https://cartjs.org/

The comment below from Quasimodo's clone and yuriy636 pushed me in the right direction. After searching with there terminology I've found this page: https://cartjs.org/

第二个例子正是我想要的.但是，我无法发表评论，但是我想赞扬这两个方面对我的帮助！

The second example is exactly what I was looking for. However I'm not able to upvote a comment but I do like to give credits to both for helping me out!

推荐答案

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

Your question is quite vague but I think what I've done below can at least nudge you in the right direction.

假设您有类似的内容-一个div来保存您的搜索结果，每个都是属于自己的div，其类别为result，另外一个div来保存已移动"的div:

Let's say you have something like this - a div to hold your search results, each of which is it's own div with class result, and a separate div to hold the 'moved' ones:

<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来添加移动"功能:

Now, we can use JQuery to put in the "move" functionality:

$(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

我不确定您在实际数据检索方面的位置如何，但是我认为像上面那样剔除前端可能对您有用.

I'm not sure where you're at in regards to the actual data retrieval, etc, however I figured knocking out the front-end as I have above may be useful for you.

这篇关于在div中显示搜索结果并添加新结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！