JAX Suggestions is pretty much what you might have seen with Google Suggest. The basic idea is, through AJAX, to give the user an immediate response to what they’re typing and displaying the search results their input would generate. AJAX Suggestions is an unobtrusive JavaScript to add that progressive enhancement to your web page, by the usage of two CSS class names to the desired

input

elements.

It could also be used, for instance, in an online e-mail application where you would want to check a name in a global address book and return the related matches, with the possibility to then adding them to the field element.

AJAX Suggestions is available either as stand-alone, or in conjunction with the DOMAssistant library.

AJAX Suggestions is released under a Creative Commons Deed license. Basically, it means that it’s free to use and improve, and that the JavaScript files keep their reference to its creator. Like this:

<strong>Copyright:</strong>
/*
	AJAX Suggestions is developed by Robert Nyman, http://www.robertnyman.com, and it is released according to the
	Creative Commons Deed license (http://creativecommons.org/licenses/GPL/2.0/)
	For more information, please see http://www.robertnyman.com/ajax-suggestions
*/

Usage:
What you need to do is to first include the JavaScript file; ajaxSuggestions.js for a stand-alone version, or ajaxSuggestions-DOMAssistant.js together with the other DOMAssistant modules (Note: remember to call the init() method of the ajaxSuggestions object, with the approach you find suitable, when using the DOMAssistant version).

Then, just add two CSS classes to the input elements you want to add the AJAX Suggestions functionality to, ajax-suggestion and url-the-actual-URL, where you should replace the-actual-URL with your desired URL. The HTML code will look something like this:

<input type="text" class="ajax-suggestion url-ajax-demo.php"/>

It is also recommended to have the HTML code for the elements that will present the suggestions in your original HTML code. For example:

<div id="search-result-suggestions">
	<h4>Top 5 results</h4>
	<div id="search-results"></div>
</div>

Please note that AJAX Suggestions supports multiple elements in the same web page, who can also use different URLs for their AJAX calls. The same element is used for presenting the results, so it will only show you the results/suggestions for the latest search.
An example reply can look any way you want; only your imagination will hold you back! Below is just a simple code example of a list with suggestions:

<ul>
	<li><a href="1" class="item">Suggestion #1</a></li>
	<li><a href="2" class="item">Suggestion #2</a></li>
	<li><a href="3" class="item">Suggestion #3</a></li>
	<li><a href="4" class="item">Suggestion #4</a></li>
	<li><a href="5" class="item">Suggestion #5</a></li>
</ul>
<p><a href="/" class="item"><b>Search for all items</b></a></p>

Settings

AJAX Suggestions gives you a number of settings for you to get the most out of your usage. The different settings, available at the top of the ajaxSuggestions JavaScript file, are described below. Here are the default settings:
Default settings

elmIdToPresentResultsIn : "search-results",
elmIdResultsContainer : "search-result-suggestions",
charactersBeforeSearch : 2,
timeBeforeSuggest : 200, // In milliseconds
sameWidthAsInputElm : false,
offsetLeft: 0,
offsetTop : 0,
urlExt : "search=",
addSearchTermToQueryString : true,
addKeyNavigationEvents : true,
hideResultsOnDocumentClick : true,
itemClassName : "item",
itemSelectedClassName : "selected",
itemInsertValueIntoInputClassName : "choose-value",
itemInsertValueSetFocusToInput : true,
hideResultsWhenInsertValueIsSelected : true,
itemSeparator : ";",
turnAutoCompleteOff : true,

Demo: http://www.robertnyman.com/ajax-suggestions/demo.htm
Download: http://www.robertnyman.com/ajax-suggestions/AJAX-Suggestions-demo.zip
Source: http://www.robertnyman.com/ajax-suggestions/implementation.htm

Related Listings:

1. Fancy Apple.com Style Search Suggestion Apple is known to create beautiful products (next to the...
2. Twitter like Search with jQuery and Ajax Learn how to display twitter like search results with jQuery...

Do you like this post?

Email: