Lazy load items with filtering

Question

I am using Backbone.js to load 20 items at a time on the page, getting more items when you scroll down to the bottom until there are none left to fetch from the server.

At the same time, I want an input field up top that as you type a name, it filters the items that match.

The issue is, if you haven't scrolled to the bottom yet and fetched the full set, the input filter will only match the items that are currently on the page.

What is the best solution technically and visually for combining UI filtering with lazy loaded items?

EDIT: The real scenario here is loading all of your facebook friends which can be very slow and mashing them up with other apis. I did not want to load all at once because the experience is delayed.

Answer 1

When a user is searching, why not reset the collection with a fetch that includes a filter?

Collection.fetch({ term : $("#search").val()})

If you setup your backend API end point for this collection to scope your results by the term params, then your collection would only contain results from the server that match the user input.

You could also limit the initial fetch to the first 3 characters the user enters then do the rest of your filtering client side as they continue to type. That is if you aren't limiting the search results server side with your first call.