PHP Ajax Auto Complete Search

please click here for more wordpress cource

To create an auto-complete search using PHP and Ajax, you will need to follow these steps:

  1. Create a PHP file that will handle the search request and return the search results in JSON format.
  2. In the HTML file, create an input field for the search term and a container for the search results.
  3. Add an event listener to the input field that will trigger the Ajax request when the user types in the search term.
  4. In the Ajax request, send the search term to the PHP file using the GET method.
  5. In the PHP file, use the search term to query the database or any other source of data for the search results.
  6. Format the search results as an array of objects, with each object representing a search result.
  7. Convert the array of objects to JSON format using the json_encode() function.
  8. Send the JSON-encoded search results back to the Ajax request using the header() function with the Content-Type set to application/json.
  9. In the Ajax success callback function, parse the JSON-encoded search results and append them to the search results container.

Here is an example code snippet to get you started:

HTML file:

<input type="text" id="search-term">
<div id="search-results"></div>

$(document).ready(function() {
    $('#search-term').on('input', function() {
        var searchTerm = $(this).val();
            url: 'search.php',
            method: 'GET',
            data: {term: searchTerm},
            success: function(response) {
                var results = JSON.parse(response);
                var container = $('#search-results');
                $.each(results, function(index, result) {
                    container.append('<div>' + result.title + '</div>');

PHP file (assuming a MySQL database):

phpCopy code<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$dbname = 'my_database';

$conn = new mysqli($host, $user, $pass, $dbname);

if ($conn->connect_error) {
    die('Connection failed: ' . $conn->connect_error);

$term = $_GET['term'];

$sql = "SELECT * FROM my_table WHERE title LIKE '%$term%'";
$result = $conn->query($sql);

$searchResults = array();

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $searchResults[] = array(
            'id' => $row['id'],
            'title' => $row['title'],
            'description' => $row['description']

header('Content-Type: application/json');
echo json_encode($searchResults);

This code assumes that you have a table called my_table with columns id, title, and description. The SQL query searches for records with a title column that contains the search term. You may need to modify the SQL query to fit your specific needs.

You may also like...

Popular Posts

Leave a Reply

Your email address will not be published. Required fields are marked *