Ajax.Search based on Prototype

Ajax.Search displays search results on the fly when typing into a search box, similar to Spotlight search results in OS X, and also the new Apple.com search box.

Try the Ajax.Search Example:

• Type ‘Bacon’ to get the first example results set (definition list)
• Type ‘Waffles’ to get the second example results set (unordered list)
• Type anything else and see the results not found message

Features

• Search results display as you type, with configurable time between keystrokes (so the server is not hit with every single keystroke)
• Up and down arrow keys highlight each result, return key sends user to search result url, escape hides the search results
• Only required output from the server is a HTML unordered list (<ul>) or definition list (<dl>), which can be styled with CSS to look however you want

How to use it

All you have to do is include prototype.js and ajax.search.js into the head of your document, then tell your page to load Ajax.Search like so:

  Event.observe(window,'load',function() { new Ajax.Search({
      url: '/ajax.search/search.php', 
      results_container: 'search_results', // default
      input: 'search', // default
      loader: 'loader', // default
      search_interval: 1000
    });
  });

Or, you can do the minimalistic approach, as long as you name your HTML elements with the default names listed above:

  Event.observe(window,'load',function() { new Ajax.Search({
      url: '/ajax.search/search.php'
    });
  });

Check out the source, try it out, break it, and let me know what you think.