simpleFilter(current version: 0.9)
SimpleFilter is a jQuery plug-in that simply filters an array of strings by some input. To use the plug-in, call the simpleFilter function on a text input (or anything with a value that can have a 'keyup' event triggered on it) and provide the source for the data. This plug-in will match results in the data and display them in a list directly below the input. Clicking on an option in the list inserts that content into the input and hides the list (there are also keyboard controls).
Requirements
- jQuery 1.2+ *
- jquery.quicksilver (simple port to jQuery-style plug-in)
- jquery.simpleFilter (this plug-in)
Feature List
- Use simple JSON array for data source
- Dynamic filter list appears when needed, hides when not
- Can use Quicksilver or traditional autocomplete-style matching
- Keyboard navigation within filtered list (up, down, enter, escape)
- Click an option in filtered list to auto-populate input
- Sort result list by score, alpha, or original order
- Accessibility attributes applied where necessary
Tested Browsers
- Mozilla Firefox 2/3
- Microsoft Internet Explorer 6/7/8
- Google Chrome
- Opera
Note that not all browsers have had every feature tested. This plug-in is still an early version, although relatively stable (I think). Please be sure to read the disclaimer and lack-of-warranty clause at the top of the code.
* Using jQuery 1.2 may cause filtered lists to appear above or below the input incorrectly depending on many factors. Upgrading to jQuery 1.2.3 or higher fixes these issues.