Javascript Question - Adding potential matches to search results on form field

[TechBoyJK]

Looking for the best way to create autopopulating drop down list for search bar..

I'm building a messaging system as part of an app, and when people go to compose a message, they can only send to existing 'friends' on their account.

I want to leave the "TO" field blank, and as they type in a name, potential matches should appear in a menu style list below the field. Just like it's done on facebook.

I know there are pre-made javascript packages for this, probably something via jQuery.

Does anybody know of any good methods for this? Best way to go about it?

 

[Kr@n]

Not so easy as it seems : you'd have to tackle this with AJAX and server-side search (you DON'T want to ship the N friends names with your page and compute the matches in javascript).

So :
- on key press, verify if you're beyond a threshold (say, 3 chars ; important for performance reasons : you don't want to compute search results too early). It's quite easy to do with jQuery (attaching an event to your field)
- if so, issue an asynchronous request (AJAX, easy with a dedicated js library ; jQuery may be able to do it, but I never worked with it, so I don't really know)
- process the search server-side (probably in a database) and encode the result set in JSON or XML
- process the response client-side (with javascript / jQuery / whatever) and display the search results manipulating the DOM (easy again with jQuery)

There must be some great tutorials out there on AJAX (check the W3Schools and others, the Mozilla Developer Center, the MSDN, etc.)

 

[beginner99]

You already have the solution. Easiest way is an "auto-complete widget" which is available in most if not all "javascript AJAX libraries".

http://jqueryui.com/demos/autocomplete/

Of course you need to create the "logic" that gets the data displayed in the auto-complete. This will be your server side language.