Auto Suggest

Description

The Spry Auto Suggest is a disclosure widget that consists of a panel, with a clickable tab and a content panel. Clicking on a tab will reveal the contents of that panel.

Required Files

SpryAutoSuggest.js

SpryAutoSuggest.css

Sample Files

SuggestSample.html

 

Structure

The widget structure is as follows:

   <widget container>
      <input textfield>
      <suggest container spry region>
   </widget container>

The markup used in this structure can be most any HTML, as long as it follows the rules for nesting.

Using the provided files, the default mark up is:

<div id="productSample">
    <input type="text" id="product" name="product"/>
    <div id="productMenu" spry:region="dsProducts1">
      <div spry:repeat="dsProducts1" spry:suggest="{name}">
        <div class="list">{name}</div>
      </div>
    </div>
</div>
<script type="text/javascript">
	var as1 = new Spry.Widget.AutoSuggest('productSample', 'productMenu', 'dsProducts1', 'name');
</script>

Constructor

Widget Constructors are small pieces of javascript that activate the markup into the working widget. These scripts must come AFTER the markup on the page, since the markup needs to exist before the constructor fires.

<script type="text/javascript">    
	var auto1 = new Spry.Widget.AutoSuggest('productSample', 'productMenu', 'dsProducts1', 'name');   
</script>

Basic Constructor

A basic constructor specifies the name of the widget and identifies the ID of the main markup container. The name of the widget is used to identify the widget for functions and methods.

<script type="text/javascript"> 
   var widgetname = new Spry.Widget.AutoSuggest("id of widget container","id of suggest container", "data set name", "suggest data set column");   
</script>

• The suggest data set column can be a single column or an array of columns To use an array, wrap in square brackets. "[name, address, email]"

Constructor Options

Constructor options allow users to specify certain attributes of the widget.

Constructor options follow the ID parameter, wrapped in curly braces {}. Options are name:value pairs, separated by a colon (:).

 <script type="text/javascript"> 
   var widgetname = new Spry.Widget.AutoSuggest("widgetContainer","suggestContainer", "ds1", "name",{option1:value, option2:value, option3:"value"});   
 </script>
  

Option	Definition	Default	Values
containsString	By default, the widget returns results that "starts" with the typed string. Setting containString to 'true' will return results where the typed string is anywhere within the result.	false	true false
minCharsType	This determines how many characters have to be typed before results are listed. This is helpful in improving performance, esp. if retrieving results directly from the server	empty	number
maxListItems	Determines the maximum number of items in the list	empty	number
hoverSuggestClass	This attribute takes a CSS class that will be applied while hovering over the results list.		CSS class name
loadFromServer	This attribute will fetch results from the server directly, rather than from the cached data set. This will trump the default data set caching setting and always fetch the results from the server.	false	true false
urlParam	This is the URL parameter name to which the search field value is attached. i.e. www.adobe.com?urlParam=searchValue	required if loadFromServer is true.	URL Parameter Name
moveNextKeyCode	This option allows the user to assign a specific key to go to the next suggestion when the list of suggestions appears. Keyboard code numbers are described here. The value of the option is the keyboard code number.	number	40 (Down Arrow key code)
movePrevKeyCode	This option allows the user to assign a specific key to go to the previous suggestion when the list of suggestions appears. Keyboard code numbers are described here. The value of the option is the keyboard code number.	number	38 (Up Arrow key code)

 <script type="text/javascript"> 
   var as1 = new Spry.Widget.AutoSuggest("widgetContainer","suggestContainer", "ds1", "name",{containsString: true, hoverSuggestClass: 'hoverClass'});   
 </script>

Recall that javascript is case sensitive.