Live search listens to the input event and fetches results from a server after a 300ms debounce. Show results in a dropdown, add keyboard arrow key navigation, and close on clicking outside the search box.
Live Search / Auto-complete
$('#search').on('input', function() {
const q = $(this).val().toLowerCase();
if (q.length < 2) { $('#results').hide(); return; }
$.get('/api/search', { q }, function(data) {
$('#results').empty();
data.forEach(item => {
$('').text(item.name).appendTo('#results');
});
$('#results').show();
});
});