Display Search Results Inside Div And Add New Results

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.

Solution 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:

<divid="searchResults"><divclass="result">This is one search result.</div><divclass="result">This is another result.</div></div><divid="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.

Solution 2:

I've heard the term infinite list and infinite scroll, Wikipedia uses 'lazy or delayed evaluation': https://en.wikipedia.org/wiki/Lazy_evaluation#Delayed_evaluation