Build Live Search Box Using PHP, MySQL and AJAX.

by Shahroze Nawaz  May 23, 2017

Every website today has an integrated search feature. However, the search box comes with a twist: the suggestions are updated as per the string entered by the user. These suggestions come in realtime from the connected database. Thus, as soon as the user starts to type in the query, the search suggestion is updated based on the input.

Build Live Search Box Using PHP, MySQL and AJAX.

This is how Google implements this idea on its search pages:

 

Live search is an essential aspect of UI and user experience on the website. In this article, I will highlight the process of building an autocomplete (Live Search) engine for your website.

Prerequisites:

  1. Code editor (Sublime or Notepad++ are good options)
  2. Apache and MySQL (either XAMPP or WAMPP). In this article, i will use XAMPP.
  3. HTML, CSS, PHP, MySQL, Javascript, AJAX.

I will first built the script on my local machine. For this, I will need a MySQL database with sample data and connect it with the AJAX form.

Database Details

Here are the details of my sample database:

Database host: localhost

Database name: autocomplete (or anything you would like to use)

Table name: search

Database user: root

Database password:

Database Setup

Open XAMPP and Start Apache and MySQL.

Now open the URL, localhost:8080/phpmyadmin (8080 is the port on my system; yours can be different)

Click on “New”.

Create a database called “autocomplete” (or anything you would like to call it).

Copy and paste the following query to create the Table (search), Column names (Id, Name), and then insert dummy data.

 

The following is the output of the query:

 

Setup Files

Create the following files in htdocs folder (usually found in C:/xampp/htdocs)

Search.php (This is the main file of the search engine, where a user inputs data and views result).

db.php (This file contains database connection details).

Ajax.php (The main file that generates AJAX request to server and return results).

script.js (This file contains javascript functions to perform AJAX requests).

style.css ( Contains styling for the search engine).

Create Search Form and Related Files

In this step, I will create the following files:

search.php

This is the main file of the search engine, where the user inputs data and views the result. Create a file named search.php and paste the following code in it:

db.php

This file contains the database connection details. Create a file named db.php and paste the following code in it:

 

 

ajax.php

This is the main file that generates AJAX request for the server and returns the results. Create a file named ajax.php, and paste the following code in it:

scripts.js

This file contains the Javascript functions  that perform AJAX requests. Create a file named scripts.js and paste the following code in it:

style.css

This file contains the styling elements for the search engine. Create a file named style.css and paste the following code in it:

The search engine is now ready for testing. For this carry out the following steps:

First, open search.php by typing the following URL in the browser:

localhost:8080/search.php

Next, input some text that will be searched in the database.

 

Notice that as you type in your query, it will pass the text to script.js  that will forward this request to ajax.php file. In the ajax.php, a javascript function named “fill()” will pass the fetched results. This function will also display the result(s) into “display” div in the  “search.php” file.

This is it. The Live Search box for your website is now ready for real-world traffic. If you need help with the code or would like to suggest improvements, do leave a comment below.

Create PHP websites without the worry of server management.

Deploy your PHP app on optimized PHP hosting servers.

About Shahroze Nawaz

Shahroze is a PHP Community Manager at Cloudways – A Managed PHP Hosting Platform. He’s always in search of new frameworks and methods to implement them. Besides his coding life, he loves movies and playing soccer with friends. You can email him at shahroze.nawaz@cloudways.com

Stay Connected:

You Might Also Like...