### 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.

Copyright © 2007. Adobe Systems Incorporated.
All rights reserved.