Spry

Insert the Auto-suggest widget

  1. Locate the following Spry files and add them to your web site.

    • SpryAutoSuggest.js

    • SpryAutoSuggest.css

    • SpryData.js

    • xpath.js

    You can find these files in the widgets/autosuggest and includes directories, located in the Spry directory that you downloaded from Adobe Labs. For more information, see Prepare your files

  2. Open the web page to add the Auto-suggest widget to and link the Spry files to the page by inserting the following script tags in the page’s head tag: 
    <head>
<script language="JavaScript" type="text/javascript" src="includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="includes/SpryAutoSuggest.js"></script>
<link href="includes/SpryAutoSuggest.css" rel="stylesheet" type="text/css" />
<link
</head>

    Make sure that the file path to the files is correct. This path varies depending on where you’ve placed the files in your web site.

  3. Add a container tag, such as a div tag, to the page, and give it a unique ID, as follows: 
    <div id="mySuggest">
</div>

    This is the main container tag for the widget.

  4. Add the input field (the search field) to the container div, as follows: 
    <div id="mySuggest">
	<input type="text"/>
</div>>
  5. Add the suggestion results container, and give it a unique ID, as follows: 
    <div id="mySuggest">
	<input type="text"/>
	<div id="resultsDIV">
	</div>
</div>
  6. Because this is a data-widget hybrid, you need a data set from which the widget can obtain suggestion data. Create a data set in the document head, as follows: 
    <head>
<script language="JavaScript" type="text/javascript" src="includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="includes/SpryAutoSuggest.js"></script>
<script language="JavaScript" type="text/javascript">
	var ds1 = new Spry.Data.XMLDataSet("data/products.xml","products/product");
</script>
</head>
  7. Bind the new data set to the results container by referencing it in the container’s tag. You do this by adding the spry:region attribute to the tag, and assigning the value of the data set name to the attribute. 
    <div id="mySuggest">
	<input type="text" />
  	<div id="resultsDIV" spry:region="ds1"></div>
</div>
  8. Add the code to use to display the suggestion results. You can use any tags, but you must add the spry:repeat attribute to the element that displays the results. Additionally, add the data reference (column name) from the data set that holds the data to display, as follows: 
    <div id="mySuggest">
<input type="text" />
  <div id="resultsDIV" spry:region="ds1">
    <ul>
      <li spry:repeat="ds1">{name}</li>
    </ul>
  </div>
</div>
  9. Add the spry:suggest attribute to the repeating element tag. This tag is responsible for populating the text field with the correct piece of data (in this case name) when the user makes a selection for the suggestion list: 
    <div id="mySuggest">
<input type="text" />
  <div id="resultsDIV" spry:region="ds1">
    <ul>
      <li spry:repeat="ds1" spry:suggest="{name}">{name}</li>
    </ul>
  </div>
</div>
  10. Add the constructor script and its four required values to initialize the widget. Remember, the constructor script must come after all of the widget code. 
    <div id="mySuggest">
<input type="text" />
  <div id="resultsDIV" spry:region="ds1">
    <ul>
      <li spry:repeat="ds1" spry:suggest="{name}">{name}</li>
    </ul>
  </div>
</div>
<script type="text/javascript">
	var as1 = new Spry.Widget.AutoSuggest("mySuggest","resultsDIV", "ds1","name"); </script>

    The syntax for the constructor script values is Spry.Widget.AutoSuggest("containerID","resultsContainerID","dataSetName","resultsDataColumn")

  11. Save the page.

    The complete code might look as follows:

    <head>
. . . 
<script language="JavaScript" type="text/javascript" src="includes/xpath.js"></script>
<script language="JavaScript" type="text/javascript" src="includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="includes/SpryAutoSuggest.js"></script>
<script language="JavaScript" type="text/javascript"> 
	var ds1 = new Spry.Data.XMLDataSet("data/products.xml","products/product");
</script>
</head>
<body>
. . .
<div id="mySuggest">
<input type="text" />
  <div id="resultsDIV" spry:region="ds1">
    <ul>
      <li spry:repeat="ds1" spry:suggest="{name}">{name}</li>
    </ul>
  </div>
</div>
<script type="text/javascript">
	var as1 = new Spry.Widget.AutoSuggest("mySuggest", "resultsDIV", "ds1", "name");
</script>
</body>