Spry Auto Suggest Widget Sample

This page will highlights the capabilities of the Spry Auto Suggest Widget . All the samples below use a list of the Adobe products. If you start typing "Adobe", the list of suggestion will be displayed.

Default
This is an example of the Spry Auto Suggest widget. 

<script type="text/javascript">
	var as1 = new Spry.Widget.AutoSuggest('productSample', 'productMenu', 'dsProducts1', 'name');
</script>
Product Name (XML):
{name}
Product Name (JSON):
{name}

Suggest list HTML structure
The suggestions can be displayed in any HTML structure. Spry uses the the tag ID to identify the suggest list container. In this example, there are three different HTML structures based on: table, div-span, ul-li. Because of a Safari bug we do not advise the use of tables because you cannot navigate using the keyboard arrows.

Product name suggest using a <table>:
{name}
Product name suggest using <div>:
{name}
Product name suggest using <ul>:

Search text position
By default, the Auto Suggest will search into the data set for records that start with the entered text. You can change this behavior by enabling the "containsString" option which will look for the typed text at any position. In this example you can type directly "Acrobat" to see the Adobe products that contains this word. 

<script type="text/javascript">
	var as5 = new Spry.Widget.AutoSuggest("productSampleContains", "productMenuContains", "dsProducts5", "name", {containsString: true});
</script>
Product name suggest that contains the string:
{name}

Multiple dataset fields lookup
The text can be searched into multiple fields in the dataset. In this situation an array of fields to be searched should be passed as the fourth argument. Along with the product name in this sample the product list is also filtered by the category. When you'll type the 'web' keyword, the list of products in categories that contain this word will be displayed. 

<script type="text/javascript">
	var as6 = new Spry.Widget.AutoSuggest("productSampleMultiple", "productMenuMultiple", "dsProductsmultiple", ["name", "category"], {containsString: true});
</script>

{name}

Minimal number of characters typed
Sometimes the list of suggestions could be very long therefore you can restrict its appearance only after a user typed a minimal number of characters. In this example we display the suggest list only after the first 3 letter of the "Adobe" are written. 

<script type="text/javascript">
	var as7 = new Spry.Widget.AutoSuggest("productSampleMin", "productMenuMin", "dsProducts6", "name", {containsString: true, minCharsType: 3});
</script>
A minimal number of 3 characters required:
{name}

Limit the number of suggestions
The AutoSuggest widget has the ability to also limit the number of suggestions. By defining a numeric non-zero value for the maxListItems option you can control this feature as you like. 

<script type="text/javascript">
	var as_min = new Spry.Widget.AutoSuggest("productSampleList", "productMenuList", "dsProductslist", "name", {containsString: true, maxListItems: 3});
</script>
Maximum 3 suggestions are displayed:
{name}

Dynamically load data from the server
The Spry Suggest Widget has the ability to dynamically request the filtered information from the server. In this case we will replace or append the URL of the given data set with the value inserted by the user. You can define a URL parameter and regardless of the caching setting of that data set, we will send the request on the server. A server side technology is required on server to filter and output the new data XML that we will display. We provide samples for PHP, ASP and ColdFusion.

<script type="text/javascript">
	var as7 = new Spry.Widget.AutoSuggest("productSamplePHP", "productMenuPHP", "dsProducts7", "name", {loadFromServer: true, urlParam: "prd"});
</script>

Note: These samples will only work when running off a server with the appropriate server technology. They are presented here for proof of concept. Try them on your own server to see them run. They use the same source XML file as used above. The source files are here:

PHP sample:
{name}
ASP sample:
{name}
ColdFusion sample:
{name}

Keyboard Navigation
The autosuggest widget has by default enabled the keyboard navigation using Up and Down arrow keys.
You can customize the keyboard keys used for the navigation feature by adding on the widget's constructor the following options: moveNextKeyCode and movePrevKeyCode that receive as value the key code.
On the bellow exapmple for navigation are used the Page Up/ Page Down keys.

<script type="text/javascript">
	var as7 = new Spry.Widget.AutoSuggest("keyboard", "productMenu_", "dsProducts1", "name", {moveNextKeyCode:34, movePrevKeyCode: 33});
</script>
Product Name:
{name}