Build an AJAX Search with PHP and MySQL

// Use this on the live select-list demo with #keyword and #displayDiv.
const input = document.getElementById('keyword');
const results = document.getElementById('displayDiv');
let pendingRequest;
input.addEventListener('input', async () => {
  if (pendingRequest) pendingRequest.abort();
  const term = input.value.trim();
  if (!term) { results.replaceChildren(); return; }
  pendingRequest = new AbortController();
  const request = pendingRequest;
  try {
    const response = await fetch('ajax-search-demock.php?txt=' + encodeURIComponent(term),
      { signal: request.signal });
    if (!response.ok) throw new Error('Search failed');
    const safeHtml = await response.text();
    if (pendingRequest === request) results.innerHTML = safeHtml;
  } catch (error) {
    if (error.name !== 'AbortError') results.textContent = 'Search unavailable.';
  }
});

<!-- Main markup for the XMLHttpRequest version -->
<label for="keyword">Student name</label>
<input type="search" id="keyword" autocomplete="off">
<div id="displayDiv" aria-live="polite"></div>
<script>
const input = document.getElementById('keyword');
let request;
input.addEventListener('input', () => {
  if (request) request.abort();
  const term = input.value.trim();
  if (!term) { document.getElementById('displayDiv').textContent = ''; return; }
  const current = new XMLHttpRequest();
  request = current;
  current.open('GET', 'ajax-search-demock.php?txt=' + encodeURIComponent(term));
  current.onload = () => {
    if (request !== current) return;
    if (current.status === 200) {
      // The PHP endpoint escapes database values before producing select markup.
      document.getElementById('displayDiv').innerHTML = current.responseText;
    }
  };
  current.send();
});
</script>

<?php
header('Content-Type: text/html; charset=UTF-8');
$term = $_GET['txt'] ?? '';
if (!is_string($term) || strlen($term) > 60 ||
    !preg_match('/^[\p{L}\p{M}0-9 .\x27-]+$/u', trim($term))) {
    http_response_code(400);
    exit('Invalid search term.');
}
require '../include/z_db1.php'; // PDO connection is provided as $dbo.
$stmt = $dbo->prepare('SELECT name, id FROM student WHERE name LIKE :term ORDER BY name LIMIT 15');
$stmt->execute(['term' => '%' . trim($term) . '%']);
echo '<select id="search-results" size="10" aria-label="Matching students">';
foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $row) {
    $id = htmlspecialchars((string) $row['id'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
    $name = htmlspecialchars((string) $row['name'], ENT_QUOTES | ENT_SUBSTITUTE, 'UTF-8');
    echo '<option value="' . $id . '">' . $name . ' =&gt; ' . $id . '</option>';
}
echo '</select>';
?>

Advance keyword search using Ajax PHP and MySQL

Suggesting matching records by using a datalist

Try the datalist autocomplete demo. It requests format=json from the same endpoint and creates each <option> with DOM methods, so returned names are treated as text rather than HTML.

const response = await fetch(
  'ajax-search-demock.php?format=json&txt=' + encodeURIComponent(term),
  { headers: { Accept: 'application/json' } }
);
if (!response.ok) throw new Error('Search failed');
const names = await response.json();
const datalist = document.getElementById('student');
datalist.replaceChildren();
for (const name of names) {
  const option = document.createElement('option');
  option.value = String(name);
  datalist.append(option);
}

As the user types, the browser sends the search term to the PHP endpoint and uses the matching names as options of the datalist. You can also review the HTML datalist basics.

Searching with multiple keywords.

select title from TABLE where title like '%plus2net%' or title like '%demo%'

Multiple keywords

Paging of Records

Paging of records using Ajax

Json

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: