javascript - Display search results inside div and add new results

Question

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.

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.

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?

EDIT

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!

Answer 1

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

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>

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

Here it is in action: 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.