How do autocomplete suggestions work?

Question

For example, if you type something in upper-right google/yahoo search box in firefox there will be some kind 'suggested auto complete' sort of thing.

Another example is in youtube search box and Stackoverflow tags edit box just below this question preview. How do they work? What technology behind 'em?

Answer 1

That's done with the use of AJAX, this site has a nice tutorial on it: AJAX Suggest Tutorial

A database with keywords and a bit of code is all there is to it as far as I know.

I'm learning how to use it right now actually, for work. :)

Another resource is w3schools. They have covered it as well.

Answer 2

They use JavaScript to normally:

• Look at a local array of all possible values
• Request another page (i.e. /autocomplete.php?q=partialText) in the background.
• Call a webservice.

When the JavaScript has the list of entries to show it modifies the page to show the autocomplete box.

If you want to put an autocomplete box on your website I have used and found the following to be very good. It is also based on the popular jQuery framework.

jQuery autocomplete plugin

Answer 3

There's as many answers to this as there are different implementations of them. Our AutoCompleter which you can see a sample of in Stacked works by raising an event which then is handled in the codebehind of the .ASPX page from which you populate a ControlCollection with whatever controls you wish. We're however in Stacked only using Literal controls with Text content being anchor links. But we could add up checkboxes or images if we wanted to...

If you're on ASP.NET our AutoCompleter is a great place to start. If you're on "something else" then probably ScriptAculous AutoCompleter is another nice place to start...

Answer 4

It's quite simple.

Client side:

1. Grab keystrokes in form field
2. On keystroke make an AJAX request to server
   1. If another keystroke is entered immediately, cancel current AJAX request as it is obsolete now
   2. Make a new AJAX requested with updated characters in form field
3. Show server response to client

Server side:

1. All words are already bucketed alphabetically
2. If client request comes in for "ove" find all words starting with ove, ordered by popularity
3. Return top matches to client

Answer 5

Here is one for MooTools.