jQuery Ajax Live Search TutorialIn this tutorial we’re using jQuery and PHP to build a Ajax live search feature for your website. A live search doesn’t need to reload the whole page and show the search results based on the currently entered keyword. For your website visitor is this a much better experience. Be careful with this kind of features if your database is very big: A new database query is done every time when the visitor enters the next character! Click here and try our demo which makes it possible to search this website.

jQuery / PHP / MySQL tutorial

We start our jQuery Ajax Live Search tutorial with the PHP code part. Create a new PHP script and name it “search.php”. In this script we need to connect to our MySQL database and based on the posted string we will do a database query. In case of a positive match, the script will loop through the result set and will add the values to an associative array. At the end the script will return this array formatted as a JSON string. If you like you can try the example code from the tutorial for a live search on the database from this WordPress website.

PHP script with database access

The first four rows are the database settings we need to connect to the database. Replace the default values with your own settings. We use the “newer” MySQLi extension which performs better and works in an OOP context. If the connection fails the script returns the MySQL error number and string.

Here we create an empty array first and if the $_POST[‘keywords’] variable isn’t empty the database query is executed. Next, the script will loop through the result set and will add the values to the array $arr. At the end the script will “echo” the JSON formatted string. That was so far the only PHP code we need, let’s continue to the HTML file.

I created a new file and named it “index.html”. Next, I added some standard HTML template code and included also the jQuery library. For this tutorial I used the CDN version provided by Google, which loads very fast and is very popular. Many Internet users have a copy in their web browser’s cache memory. All JavaScript code is placed right before the closing BODY tag for the best performance. We have a simple form with only a single form field. A form button is not necessary because we will submit the form by a jQuery event. Add the following code below the tag where the jQuery library is included.

The following code is used as trigger and will “collect” the search values from the form element.

The following code will post the search value to the search.php file, but only if the search value is equal or longer than 3 characters.

The function post is very similar to how a HTML form works, but it gives us the possibility to collect some callback in response. If the file search.php returns any data we remove first anything from the UL element with the ID “content”. The “each” loop is used to create new list elements for each of the returned data pairs (ID and post title).

The complete HTML page with form and jQuery code

You can see it’s very easy to use jQuery for some nice user interface. The jQuery part is actually one a view rows of code. For debugging some jQuery code, you should install the firebug extension for your web browser. Both, the demo and the example code are enhanced with the Bootstrap CSS framework. We removed this extra code from the tutorial to keep it simple. The demo is a bit different from the tutorial, because we’re using the database from this website.

Demo Download