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">
<head>
    <meta charset="UTF-8">
    <title>PHP / Ajax search example.</title>
</head>
<body>
    <!-- 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="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    //Add a click listener to our search_button.
    $('#search_button').click(function(){
        //If the search_button was clicked,
        //get the value from the search_box.
        var search_term = $('#search_box').val().trim();
        $.ajax({
            url: 'search.php',
            data: {
                q: search_term
            },
            success: function(returnData){
                //Blank the search_results div.
                $('#search_results').html('');
                //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!');
                }
            }
        });
    });
</script>
</body>
</html>

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:

<?php

//A list of example cities.
$cityList = array(
    'New York',
    'Los Angeles',
    'Paris',
    'Hong Kong',
    'Tokyo',
    'Rome',
    'London',
    'Dublin',
    'Boston',
    'Glasgow',
    'Brussels',
    'Munich',
    'Moscow'
);

//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!