Simple PHP & Ajax search tutorial.

This is a short guide on how to build a simple search form using PHP and Ajax. In this tutorial, we will use the JQuery library to carry out an Ajax request to a PHP file, which will return our search results. This example can be adapted to search database tables, etc.

Let’s take a look at the HTML page that will contain our search form and JavaScript. I have added comments to the code so that you can better understand what is going on:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>PHP / Ajax search example.</title>
    <!-- search box -->
    <input type="text" id="search_box"><br>
    <!-- search button -->
    <input type="button" id="search_button" value="Search">
    <!-- the div that will contain our search results -->
    <div id="search_results" style="padding:5px;"></div>

<!-- include the JQuery library -->
<script src=""></script>
    //Add a click listener to our search_button.
        //If the search_button was clicked,
        //get the value from the search_box.
        var search_term = $('#search_box').val().trim();
            url: 'search.php',
            data: {
                q: search_term
            success: function(returnData){
                //Blank the search_results div.
                //Parse the result that we got back from search.php
                var results = JSON.parse(returnData);
                //Loop through the results array and append it to
                //the search_results div.
                $.each(results, function(key, value){
                    $('#search_results').append(value + '<br>');
                //If the results array is empty, display a
                //message saying that no results were found.
                if(results.length == 0){
                    $('#search_results').html('No results found!');

A quick summary:

  • We created a simple text input field and a search button.
  • We also created an empty div called “search_results”. We will populate this div with our search results once the Ajax request to our search.php file has been successfully completed.
  • After that, we added a JQuery onclick event listener to our search button.
  • When the user clicks on the search button, we blank the “search_results” div and send a simple Ajax request to our search.php file. In our request, we include the search term that the user entered as a GET parameter in the Ajax request. In the example above, we call this parameter “q”, which is short for “query”.
  • When our PHP file returns the search results, we loop through the array and append it to our “search_results” div.

The code for the PHP file is pretty straight forward:


//A list of example cities.
$cityList = array(
    'New York',
    'Los Angeles',
    'Hong Kong',

//Get the search term from our "q" GET variable.
$q = isset($_GET['q']) ? trim($_GET['q']) : '';

//Array to hold results so that we can
//return them back to our Ajax function.
$results = array();

//Loop through our array of cities.
foreach($cityList as $city){

    //If the search term is present in our city name.
    if(stristr($city, $q)){
        //Add it to the results array.
        $results[] = $city;

//Display the results in JSON format so that
//we can parse it with JavaScript.
echo json_encode($results);

In the example code above, we search an array of city names and return the results in a JSON format. If we wanted to, we could easily modify the PHP code above to search a particular MySQL table instead of an array. See: Ajax search with MySQL, PHP and JQuery.

Hopefully, this tutorial set you down the right path!