AJAX Live Search in PHP

What we are building

A live search shows results the moment you type, without pressing a button or reloading the page. It combines three pieces: an HTML search box, some JavaScript using AJAX, and a PHP file that queries the database. This is one of the most popular real features to learn.

How AJAX works

1. The user types in the search box.
2. JavaScript sends the typed text to a PHP file with fetch().
3. PHP searches the database and returns matching results.
4. JavaScript places those results into a box on the page — instantly.

The page never reloads; only the results area changes. That is what makes it feel fast and modern.

The search box and JS

<input type="text" id="search" placeholder="Search...">
<div id="results"></div>

<script>
  const box = document.getElementById("search");
  box.addEventListener("input", function () {
      fetch("search.php?q=" + encodeURIComponent(box.value))
          .then(res => res.text())
          .then(html => {
              document.getElementById("results").innerHTML = html;
          });
  });
</script>

On every keystroke (input), JavaScript sends the text to search.php and drops the reply into the results div. encodeURIComponent makes the text safe for the URL.

The PHP handler

<?php
  // search.php
  $q = $_GET["q"] ?? "";
  $stmt = $pdo->prepare(
      "SELECT name FROM students WHERE name LIKE ?"
  );
  $stmt->execute(["%$q%"]);
  foreach ($stmt->fetchAll() as $row) {
      echo "<p>" . htmlspecialchars($row["name"]) . "</p>";
  }
?>

The handler reads q, runs a prepared statement with LIKE to find matches, and echoes safe HTML that JavaScript displays.

Keeping it safe

• Prepared statement: bind the search term, never paste it into SQL.
• Escape output: wrap results in htmlspecialchars to block XSS.
• Debounce: wait a moment after typing stops, so you do not hit the server on every letter.
• Skip tiny queries: ignore searches shorter than 2 characters.

Common mistakes

• Pasting the search term into SQL. Use a prepared statement with LIKE ?.
• Not escaping results. Un-escaped names can carry XSS — use htmlspecialchars.
• Searching on every keystroke. Add a debounce delay to avoid flooding the server.
• Forgetting encodeURIComponent. Special characters break the URL without it.

Summary

• Live search updates results as you type, with no page reload.
• AJAX (via fetch) sends the text to PHP and shows the reply.
• PHP uses a prepared statement with LIKE to find matches.
• Escape output and use a debounce for safety and speed.
• No jQuery needed — modern fetch is enough.

Next, secure the query side with prepared statements, or return structured data with PHP JSON.