flexselect: a jQuery plugin

FlexSelect is a jQuery plugin that turns select boxes into flex-matching incremental-finding controls.

Flex matching a few keystrokes against longer strings is a boon in productivity for typists. Applications like Quicksilver, LaunchBar, and Launchy have made this method of keyboard entry a popular one. It's time to bring this same functionality to web controls. FlexSelect does that for select boxes.

How You Can Help

If you like this project, please help. Donate via Gittip or buy me a coffee with Bitcoin.

Bitcoin: 1rmm5tv6f997JK5bLcGbRCZyVjZUPkQ2m

Need Help?

You can book a session with me on Codementor.

Usage

First, load jQuery, the LiquidMetal scoring algorithm, and the plugin:

<script src="jquery.min.js" type="text/javascript"></script>
<script src="liquidmetal.js" type="text/javascript"></script>
<script src="jquery.flexselect.js" type="text/javascript"></script>

Now, let's attach it to your select boxes on DOM ready:

<pre>
  jQuery(document).ready(function() {
    jQuery("select.flexselect).flexselect();
  });
</pre>

This will turn all select elements with a class of flexselect:

<select class="flexselect" id="president name="president">
  <option value="1">George Washington</option>
  <option value="2">John Adams</option>
  <option value="3">Thomas Jefferson</option>
  ...
</select>

into a bad-ass autocompleting text box with flex matching support.

For more usage and examples: http://rmm5t.github.io/jquery-flexselect/

Inspired by:

jQuery.quickselect by Daniel Parker
MooTools Select Autocompleter by Kyle Neath
Live Search with QuickSilver Style (for jQuery) by John Nunemaker
jQuery LiveSearch by John Resig

Todo

Review the "picked" logic
Add templating support for matched list output.
Add highlighting of matched characters in the results.
Consider support for optgroup tags

Author

Ryan McGeary (@rmm5t)

Other

MIT License

sionqi/jquery-flexselect