Ajax AutoComplete in PHP

Download Ajax AutoComplete Script

Whenever a keyup event on a textbox occur, a function in javascript is called which uses ajax to send the input in the textbox to the server
The server receives the input and check for any matches in the database
The matched result is sent back to the client side javascipt code, ajax, and then the result is shown in an absolute positioned div just under the input box.
This is how it will look like:

Now we move how will we make the script. It consists of following files along with their description in brief. These are the client side file:

script.html – This is the main file in which there is input box and the result to be shown as shown in the image above
ajax.js – This file holds the ajax code used to send and receive ajax requests to/from the server.
tools.js – It contains some useful functions used in the script like trim(string) which is used to trim/remove leading and lagging spaces from a string.
autosuggest.js – This contains the functions used to carry out the operations of ajax autosuggest. It contains code to get the input from the input box, send request via ajax and show the result received in the absolute positioned div.
Now on the server side, you can use any scripting language you want, but I have used php which is most widely used. These are the server side file:

autosuggest.php – This files receices the request sent by the ajax from the autosuggest.js file. It searches the database for the possible matche(s) of the input and then send back the result to the autosuggest.js file.
dbconfig.php – It holds the MySQL database settings, since this is the type of the database I have used.
headers.php – Headers are sent to the browser to prevent it from caching the results and also the necessary header are sent to make the output in xml format.

You can download all the files as zip from here:

Download Ajax AutoComplete Script

Note: I have updated the script and it now multiple instances of the script can be run on a single web page. So please ensure that you you use different IDs for the auto-suggest html elements.

Also I have added the function of keyboard navigation so now it works with the keyboard input and you can navigate the suggested keywords up/down using the up/down keys on your keyboard.

If you need any help, please comment on this post, I will definitely reply to relevant queries, thanks.