Autocomplete Input

Autocomplete

Implement an autocomplete input using jQuery's AJAX to fetch suggestions as the user types, then show results in a dropdown.

Example

$("#search").on("input", function() {
  const q = $(this).val().trim();
  if (q.length < 2) { $("#suggestions").empty(); return; }

  $.getJSON("/api/suggest?q=" + encodeURIComponent(q), function(items) {
    const html = items.map(item =>
      `<li class="list-group-item list-group-item-action suggestion"
           data-id="${item.id}">${item.name}</li>`
    ).join("");
    $("#suggestions").html(html);
  });
});

$(document).on("click", ".suggestion", function() {
  $("#search").val($(this).text());
  $("#suggestions").empty();
});

JAVASCRIPT

Full Editor

Pro Tip

Debounce the input event to avoid firing AJAX on every keystroke.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned