Google contacts behavior using jquery

Question

Google Contacts lets you search your contacts by typing in an input box while recurrently update an other part on the screen with the results

What would be a good approach to imitate this behavior using jquery?

I thought about starting from jquery Autocompleter and change it accordingly, after all, its behavior is not very different (mostly css)

What is the official name of this behavior? I've looked for such component in the jquery UI library but couldn't find it

Thanks, Guy

Answer 1

Yeah, AutoComplete sounds like what you're looking for. This will merely require you to populate a list on the client that will be filtered against the value of a textbox as you type.

Your list can be populated immediately upon page-load, or asynchronously. Depending on the site of your contact-list, one option may be more attractive than the other. Here's an example of an explicit list:

// Create an Array of Values
var data = "Core Selectors CSS Events Effects Ajax Utilities".split(" ");
// Attach autoComplete logic to a textbox
$("#example").autocomplete(data);

The first parameter of $.autoComplete() can accept a URL if you wish to load your values that way too.