PHP Live Search with AJAX

Decide whether you are searching a prefix, a contained phrase, or words under a full-text engine. A prefix search for 'pen' can match Pencil; a contains search can also match Open notebook. Case sensitivity and accent handling depend on the database collation, so test the language your catalog uses. LIKE interprets wildcard characters, meaning a submitted percent or underscore has special meaning unless you escape it under a documented policy. If the interface promises literal text, escape these wildcard characters separately from parameter binding. Prepared statements prevent SQL injection but do not change LIKE's pattern grammar. Keep maximum term length and result count small, and choose a deterministic order with a unique tie-breaker.

A read-only GET endpoint can accept q as a scalar string and return an array of small result objects. Reject unexpected arrays, trim permitted edge whitespace, and impose a maximum length. A minimum length such as two characters reduces broad scans, but choose a policy appropriate to your data and users. Return an empty result array for a valid term below the minimum if that is the documented interface behavior. Do not expose private product fields or account records through a public search. If results are permissioned, apply authorization inside the query or before serialization. Set Content-Type to JSON and return status codes that distinguish invalid input from server failure. Keep SQL and connection diagnostics out of the public body.

The PHP endpoint prepares a SELECT with a placeholder for the search pattern. The pattern is data, so it belongs in the execute values rather than being joined into the SQL text. Select only the columns needed by the list and use a fixed or safely bound integer limit. ORDER BY name, id gives stable behavior when names repeat. A prefix LIKE may use an index under suitable collation and query conditions; a leading wildcard often prevents ordinary prefix index use. Measure the actual plan rather than promising an index always helps. For large catalogs, consider a dedicated full-text or search service with an explicit ranking and access policy. The UI's small result cap does not automatically make the underlying query cheap.

Debouncing waits briefly after the most recent input event before starting a request. Each new event clears the earlier timer. That reduces requests during rapid typing without making users manually press a search button. AbortController can cancel an obsolete browser request, but the server may already be processing it. Use a monotonically increasing sequence number as an additional rendering guard: a response may update the list only if it belongs to the current search. Encode query values with URLSearchParams rather than concatenating unescaped text into a URL. Check response.ok before reading results as success. Ignore expected aborts while displaying genuine failures clearly. The exact debounce delay is an interface choice, not a security boundary.

Create list items with document.createElement() and set textContent from the JSON name. Database content can include hostile markup, so inserting it into innerHTML creates a separate vulnerability even with prepared SQL. Show loading, no results, and failure states distinctly. A simple search result list is easier to implement accessibly than a full combobox; if you build keyboard-selectable autocomplete, follow its focus, arrow-key, and announcement requirements. Keep the search field labeled and indicate updated result counts through a suitable status region. Preserve a normal search-submit route for users who cannot use JavaScript when practical. Do not move keyboard focus after every response or repeatedly announce an entire large list.

Server-side rate limits, request budgets, and query monitoring protect against clients that ignore your debounce code. Cache public searches only where their data and freshness rules permit it. Authenticated results must not leak through shared caches. Log query duration and result counts without storing sensitive terms unnecessarily. Validate resource usage with popular prefixes, empty terms, wildcard-heavy input, and unusually long strings. Search pagination and result ranking should agree with the broader catalog page; a live-search preview may legitimately show only ten results and link to the complete search. Document that distinction so users do not assume missing preview items do not exist. Review slow searches using realistic data volume rather than a five-row development database.

Implement a browser widget with a labeled search input and a result list. On input, clear the prior debounce timer and schedule a request after a short documented delay. Abort the previous controller, increment a sequence number, build q using URLSearchParams, and check the HTTP result. The solution renders only if its sequence is still current and inserts names with textContent. Test typing Pe and then Pencil while deliberately slowing the first response. Also test no matches, an invalid request, and a network failure. Add a server limit because browser timing can be bypassed. For private catalogs, confirm one account cannot retrieve another account's products.

Save this HTML page beside the PHP search endpoint and serve both through the same PHP-enabled development server. The endpoint route below is /search.php; adapt it to your application's routing. The static training website displays these examples and does not itself host their PHP endpoints. An input event invalidates the previous request immediately, so an old result cannot render during the next debounce interval. A controller cancels unnecessary browser reads, while the sequence check remains the final guard. Result names enter the document through textContent.

<label for="product-search">Search products</label>
<input id="product-search" type="search" autocomplete="off">
<p id="search-status" role="status" aria-live="polite"></p>
<ul id="search-results"></ul>
<script>
const input = document.querySelector('#product-search');
const status = document.querySelector('#search-status');
const results = document.querySelector('#search-results');
let timer;
let controller;
let sequence = 0;
input.addEventListener('input', () => {
  clearTimeout(timer);
  controller?.abort();
  const current = ++sequence;
  const term = input.value.trim();
  results.replaceChildren();
  if (term.length < 2) {
    status.textContent = 'Type at least two characters.';
    return;
  }
  status.textContent = 'Waiting to search...';
  timer = setTimeout(async () => {
    controller = new AbortController();
    status.textContent = 'Searching...';
    try {
      const query = new URLSearchParams({q: term});
      const response = await fetch('/search.php?' + query, {
        signal: controller.signal,
        headers: {Accept: 'application/json'}
      });
      if (!response.ok) throw new Error('Search failed');
      const data = await response.json();
      if (current !== sequence) return;
      if (!Array.isArray(data.results)) throw new Error('Invalid response');
      for (const product of data.results) {
        if (typeof product.name !== 'string') throw new Error('Invalid product');
        const item = document.createElement('li');
        item.textContent = product.name;
        results.append(item);
      }
      status.textContent = data.results.length
        ? data.results.length + ' matching products.' : 'No matching products.';
    } catch (error) {
      if (error.name === 'AbortError' || current !== sequence) return;
      results.replaceChildren();
      status.textContent = 'Search unavailable. Please try again.';
    }
  }, 250);
});
</script>

Expected behavior: typing Pe waits 250 milliseconds after the latest input, requests the PHP endpoint, and lists matching names. Typing a newer term immediately clears old results and prevents the older response from rendering. A failed HTTP response produces the visible retry message. This is a results list with a status region; a keyboard-selectable combobox would require additional interaction behavior.

Read PDO and MySQL, JSON, and REST APIs for database and response contracts.

The PDO prepared statement reference documents placeholders for values.