X

What is Autocomplete ?

0

Autocomplete is used by most of the websites and you may have already used it in Google or Facebook. Google and Facebook use it in their search box. Facebook uses autocomplete even for adding college, company and other profile details. So what is Autocomplete ?

Typeahead was started as a feature by which the textbox in the browser will complete your sentence as you start typing. Later typeahead was modified to be autocomplete and autosuggest. While initially it meant differently today autocomplete, autosuggest and typeahead means almost the same thing. Once you start typing in the text box, it offers you an autocomplete dropdown with suggested lines. Some scripts may pre-fill the textbox with one suggestions and highlight that (typeahead) while others may just give you options for selection.

The autocomplete consists of 3 parts :

1. 1. Browser or client side.

This is the part where the user interacts and types in the text box. The data fetched from the server is also modified here using Javascript and shown to the user for selecting and avoiding writing the complete line. Most of the action occurs here with the use of javascript.

2. 2. The AJAX page.

While the user types anything in the text-box, the content is send to the server using AJAX features. AJAX in simple terms means that the content (in this case the typed character) is sent to the server without page reloads/refresh using javascript (asynchronously). Talking in detail about AJAX is beyond the scope of this tutorial. (Sorry !)

3. 3. The database.

The AJAX page interacts with the database and gets the data to be used on the client side.

Since everything is happening on the same page without any page reload, most of the things have to be done by Javascript. Javascript is a client side language and controls the browser activities. As most of the thing is done in Javascript it hardly matter whether you are using PHP or ASP or JSP as your server language, the program should work well with any server language.

Autocomplete helps both the website developer as well as User. For the user, he needs to type less and can select from the available options. For the developer, it can avoid duplication. Facebook offers you some college name once you type few text in the textbox. You type less and select from the college options. Once you select the college, Facebook knows that its not a new college, but an old one already in the database !