Skip to content
A jQuery plugin that turns regular select boxes into Quicksilver-like, flex-matching, incremental-finding controls.
JavaScript Ruby
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
.gitignore
README.markdown
Rakefile
flexselect.css
index.html
jquery.flexselect.js
liquidmetal.js
test.html

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.

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[class*=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.com/jquery-flexselect/

Inspired by:

Todo

  • Fix selectedIndex when mouse happens to sit over dropdown during incremental find (perhaps unbind mouseover during filtering until a mousemove).
  • Add templating support for matched list output.
  • Add highlighting of matched characters in the results.

Author

Ryan McGeary (@rmm5t)

Other

MIT License

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

Something went wrong with that request. Please try again.