ddunlop

For a project that I am working on I wanted to make use of a type ahead input box for searching. I found Peter Vulgaris’s jQuery Suggest which worked well. The thing is the results for the suggest that I was returning where not just suggestions but actual results. If the user was to select an item from the suggested list they could skip going to the search page and go to the end page.

If you’ve had enough reading, you can jump to the demo of Item Suggest now.

So I needed a way to pass back the vital information so that I could construct a URL and forward the user there once an item was selected.  The way that jQuery Suggest worked was that it fetched a file that that was then broken apart by a deliminator (default: “\n”) removed empty items, added a class to the matching part of the value and displayed the items as list elements.

I wanted to be able to pass a JSON array back and handle how it got displayed.  So I made some changes to the code and allowed a few more options.  Without specifying any options the plugin behaves the same way that it used to.

usage: suggest(source, options)

source

The location of the file that will generate the response

options

• delay ( Number ): the length of time to weight before firing off the suggest request (default: 100)
• resultsClass ( String ): the class to add to the ul holding the suggested items (default:  ‘ac_results’)
• selectClass ( String ): the class to add to the element of the item that is currently selected (default:  ‘ac_over’)
• matchClass ( String ): class to add to the segment of the suggestion that matches (default:  ‘ac_match’)
• minchars ( Number ): How many charecters need to be entered before suggestions start getting made (default: 2)
• delimiter ( String ):  When a ajax request is returned and createItems is flase the returned text is broken apart by this delimiter (default:  ‘\n’)
• createItems ( Function(txt) ): This function is called with the resonse from the server passed in as txt, and expects a return of an array with the items in it if this is not specified the delimter is used to break the string into items.
• formatItem ( Function(item,q) ): For each item in the list this function is called passing in the item and q the query that was preformed. A useful function this.addMatchClass(txt,q) can be used to add a span with the class from match class.  by default the item is wrapped in an li element and passed though addMatchClass.
• selectItemText ( Function(item) ): This function is called when an Item is selected and expects the return value to be wha to display in input box.  By default the text value of the selected element is used.
• onSelect ( Function(item) ): This function is called when an item is selected
• maxCacheSize ( Number ): This controls how much data is stored in the cache (default: 65536)

Making use of the default class values you can start with this style sheet which is used in the demo and is the same used for jquery.suggest.  Here is the source for item-suggest.

Check out the demo.