Autocomplete Textbox using PHP, MySQL and AJAX

Autocomplete Textbox using PHP, MySQL and AJAX

 

As all of us know that autocomplete textbox is one of the most user friendly web elements. It makes searching easy. You must have seen autosuggestion and autocomplete textbox on google, facebook etc. Now I amd going to explain, how it is implemented using PHP, MySQL and jQuery. It can be implemented using jQeury AJAX. But here, I am going to explain the simplest way. So lets start with the autocomplete textbox tutorial.

In this tutorial I am going to use simple autocomplete function. Here I will display a textbox for coding skills entry. Once you start entering skill, the autosuggestion skills would be listed under the textbox and you can select it from there.

JQUERY UI LIBRARY & JQUERY

We need to include jQuery library, jQuery UI library and jQuery UI stylesheet.

Define the autocomplete function and provide the source file.

HTML

Now, enter following HTML:

PHP

Now, for getting data from database PHP code is needed. The textbox value will be get by term  field ( $_GET[‘term’] ) from the query string. Now we will fetch the data from skills table and filtering the skills by $_GET[‘term’] . At last we will return the filtered skills data in JSON format. Here is the PHP source code:

That’s all folks. Now you are all set to use autocomplete textbox.

You can download the source code from here.