Posted in | Posted on 05-18-2007 | 4,887 views
Autosuggest isn't new to Spry 1.5, but I never had a chance to take a look at it till this morning. Surprisingly it wasn't too difficult. Tonight's example will be rather simple, but I'll follow it up with a ColdFusion-based one tomorrow.
At the simplest level, to enable autosuggest you create a simple text field. This is obviously the field that will have the autosuggest tied to it. So I'll start off with that:
Next I wrap the form field in a div:
2 <input type="text" name="search" />
3</div>
This is simply going to wrap our autosuggest area. So next lets talk data. Where will the autosuggest information come from? Luckily it comes from the datasets we know and love in Spry. So for this demo I'll use the following:
2var dsCharacters = new Spry.Data.XMLDataSet("data.xml","people/person");
3</script>
Now that I've got a DataSet, I can use it just like I've used Spry datasets before. So for example:
2 <span spry:repeat="dsCharacters" spry:suggest="{name}">{name}<br /></span>
3</div>
This shouldn't look different from previous Spry examples. In this case the repeating of the dataset is used for the autosuggest. I can put whatever HTML I want in there. The value that will be used comes from the spry:suggest.
Basically - thats it! We do need some libraries and a bit of JavaScript. Currently three JavaScript libraries and one CSS file is required:
2<script language="JavaScript" type="text/javascript" src="/spryjs/xpath.js"></script>
3<script language="JavaScript" type="text/javascript" src="/spryjs/SpryData.js"></script>
4<script language="JavaScript" type="text/javascript" src="/spryjs/SpryAutoSuggest.js"></script>
Lastly, after the div we add one line of JavaScript:
2var theSuggest = new Spry.Widget.AutoSuggest("mySuggest","resultsDIV", "dsCharacters","name", {hoverSuggestClass:'highlight'});
3</script>
The first argument points to the great div that wraps the entire autosuggest area. The second argument points to the div that will draw out the suggestions. The third argument is the dataset. Next we tell Spry what field to search. After that we can pass a set of arguments. One of the most important ones is the hoverSuggestClass. Without it the autosuggest is a bit hard to read.
You can see a demo here: http://www.coldfusionjedi.com/sprysuggest/index.html. To see the autosuggest in action, try a few Star Wars names.
<cfinput type="text" name="fruit" autosuggest="apple,banana,lemon,lime,mango,orange,peach,pear">
He even showed some cool auto suggest features on drop downs.
Thanks for the info I actually have a use for it now, can't wait around for CF8.
The Google Toolbar provides a good example of how autosuggest should work. I couldn't imagine it working by downloading a data file with 10 billion items! ;-)
Don't run till N characters typed.
Hit server for every change (this may slow things down, but it does let you get datasets just specific to your text)
/ejt
For example I want the user to be able to start typing the value of the item they want to select and the dropdown will perform a "best match" to find what they are looking for.
Any ideas on using spry to do this?
For example, you might have:
1:Ray
2:Bill
3:Steve
If i pick steve, the value of 3 is submitted, NOT "Steve". Is there an easy way to do this in spry - I couldn't find it.
[Add Comment] [Subscribe to Comments]