How do you make one of those search boxes on a web page that previews search results?

Question

I'm developing a web site that has a search box as part of the standard page template (similar to what you see on the top right of the SO site). I want to dynamically preview possible matches to the user input, similar to what you see when you start typing in a query into the google.com search page, as a drop down that appears underneath the search box. How do you do this? Some sort of JavaScript/Ajax combination?

Answer 1

You could use jQuery to do this, and as the keyup event (or related event) is fired, you can fire off a request to the server, or to a local collection of words, and show all that match in a div below the box.

$("#searchbox").keyup(function(){
  $.post("suggestions.php", {data:$(this).val()}, function(response) {
    $("#suggestions").html(response).slideDown();
  }, "HTML");
}).blur(function(){
  $("#suggestions").slideUp();
});

/*
---------------------
| ph_               |
---------------------
| philanthropy      |
| photoshop         |
| PHP               |
---------------------
*/

Answer 2

There is a popular jQuery plugin to achieve this. Check the docs.