Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A jQuery plugin that turns regular select boxes into Quicksilver-like, flex-matching, incremental-finding controls.

README.markdown

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

Gratipay Bitcoin Book a Codementor session

If you like this project, donate via Gratipay, buy me a coffee with Bitcoin 1rmm5tv6f997JK5bLcGbRCZyVjZUPkQ2m, or 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:

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

Copyright (c) 2009-2013, Ryan McGeary (ryan -[at]- mcgeary [dot] org)

Something went wrong with that request. Please try again.