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.