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.

Beggar

Are there technical limitations as to why you do not load all the items to begin with or is it mostly for the user experience? Knowing the answer to this question may help to formulate an answer to your question... – Holystone

Lazy loading on... how many facebook friends do you bloody have? – Cornelie

Does the FB api allow you to get items with a filter parameter? e.g. return only friends with 'jo' in their name? – Ogg

@Beggar Use a autocomplete that serves data from your server rather than the current state of collection, there might be other people who are modifying the collection as you type hence this is always better – Basie

@Louis, some people have friends as large as 600+ so paging is a must. I think ill go with Deeptechtons and brains911 answer to filter on the server. Client side filtering is inherently flawed in this case. – Beggar

600 is still a very small amount of data, are you pulling up images during the caching phase or only during the display phase? Mixing the autocomplete with dynamic loading still doesn't sound too difficult, perhaps show us some code and we can start looking at a solution for you :) – Cornelie

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.

Handicapper