← Back to PHP Course | Chapter 15: Web Development | Lesson 12 of 12

PHP AJAX Live Search

A live search box updates its results as the user types, without a page reload or even clicking a search button -- one of the most common and immediately satisfying AJAX patterns. It combines a JavaScript keystroke listener, an AJAX request per keystroke (usually debounced), and a PHP endpoint querying the database for matches.

In this page:

  1. The Basic Live Search Structure
  2. Listening for Input and Triggering a Search
  3. Debouncing Search Requests
  4. Displaying Live Search Results
  5. Handling Out-of-Order Responses
Syntax
php 
$query = $_GET["q"] ?? "";
$matches = array_filter($items, fn($item) => stripos($item, $query) !== false);

header("Content-Type: application/json");
echo json_encode(array_values($matches));

The Basic Live Search Structure

A live search interface has three pieces working together: an <input> field the user types into, a JavaScript listener that fires an AJAX request as the text changes, and a PHP endpoint that searches the database and returns matches to display.

Note: Build and test each piece independently first -- confirm the PHP endpoint works via a direct URL, then wire up the JavaScript listener afterward.
Warning: A live search box with no debouncing and no minimum-character threshold sends a request for every single keystroke, including very short, unhelpful search terms like a single letter.

Example: The Basic Live Search Structure

php 
<?php
// Set `$_GET['q']` to "ph"
$_GET['q'] = "ph";
// Declare `$products` as an array: `["php", "python", "java"]`
$products = ["php", "python", "java"];
// Declare `$matches`, set to `array_filter($products, function ($p) { return strpos($p, $_GET['q']) !== false; })`
$matches = array_filter($products, function ($p) { return strpos($p, $_GET['q']) !== false; });
// Print `json_encode(array_values($matches))` to the output
echo json_encode(array_values($matches));
?>

Listening for Input and Triggering a Search

JavaScript's input event fires every time the text field's value changes, including single keystrokes and pastes -- the natural event to listen for in a live search box, since it captures every way the search text can change.

Note: Use the "input" event rather than "keyup" for broader coverage, since input also fires for pasted text and other non-keyboard changes to the field.
Warning: Firing a full AJAX request synchronously inside the input event handler with no debouncing sends far more requests than necessary as the user types normally.

Example: Listening for Input and Triggering a Search

php 
<?php
// JS: input.addEventListener('input', () => fetch('search.php?q=' + input.value))
$_GET['q'] = "p";
echo json_encode(["query_received" => $_GET['q']]);
?>

Debouncing Search Requests

Debouncing delays sending the search request until the user has paused typing for a short moment (like 300 milliseconds) -- if a new keystroke arrives before that delay finishes, the pending request is cancelled and the timer restarts, dramatically reducing the number of requests sent while typing quickly.

Note: A debounce delay between 200 and 400 milliseconds feels responsive to users while still meaningfully reducing request volume during fast typing.
Warning: Skipping debouncing on a live search box that queries a database can put unnecessary load on the server, especially for users who type quickly.

Example: Debouncing Search Requests

php 
<?php
// JS: clearTimeout(timer); timer = setTimeout(() => search(value), 300);
echo "Debouncing happens in JavaScript before the PHP endpoint is ever called";
?>

Displaying Live Search Results

Once the AJAX response arrives with matching results, JavaScript updates the page's results container -- typically clearing out any previous results first, then building new list items for each match returned by the PHP endpoint.

Note: Clear the previous results before rendering new ones, so a fast-typing user does not see old and new results mixed together.
Warning: Inserting search results directly as raw HTML without escaping (if the data could ever contain user-generated content) risks an XSS vulnerability -- build DOM elements safely instead.

Example: Displaying Live Search Results

php 
<?php
$products = ["php", "phpunit", "phpmailer"];
echo json_encode($products);
// JS clears the results container, then builds a list item per match
?>

Handling Out-of-Order Responses

Because requests fire asynchronously, a slower response to an earlier (shorter) search term can arrive after a faster response to a later, more specific one -- overwriting the correct, current results with stale ones.

Tracking a request identifier and ignoring any response that is not the most recent request avoids this.

Note: Track a simple counter or timestamp for each request, and discard any response whose identifier does not match the most recently sent request.
Warning: Without any out-of-order protection, a fast typist can occasionally see search results for an earlier, no-longer-relevant search term flash onto the screen.

Example: Handling Out-of-Order Responses

php 
<?php
$_GET['requestId'] = "3";
$_GET['q'] = "php";
echo json_encode(["requestId" => $_GET['requestId'], "results" => ["php", "phpunit"]]);
// JS ignores any response whose requestId isn't the most recent one sent
?>
Related Topics

PHP AJAX XML · PHP String Search & Replace · PHP AJAX Database · PHP AJAX PHP

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Firing an AJAX request on every single keystroke without any debouncing, flooding the server with requests for a user typing quickly.
  2. Building the live search database query without a prepared statement, since the search term comes directly from unpredictable, fast-changing user input.
  3. Not handling out-of-order responses, where a slower request for an earlier, shorter search term arrives after a faster request for a later, more specific one, showing stale results.
Chapter Summary
  • A live search box listens for keyup/input events and sends an AJAX request with the current search text on each change.
  • Debouncing delays firing the search request until the user pauses typing briefly, avoiding a request on every single keystroke.
  • The PHP endpoint safely queries the database with the search term using a prepared statement and LIKE, returning matches as JSON.
Browser Support

Live search relies only on standard AJAX (fetch) and PHP database querying, both fully supported in every modern browser and PHP environment.

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson PHP AJAX XML Next Lesson → PHP Unit Testing (PHPUnit)

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.