flexselect

a jQuery plugin

What?

Flexselect is a jQuery plugin that turns select boxes into flex-matching incremental-finding controls. Think of it as Quicksilver squished into a select box. Download, view the examples, and enjoy.

Flexselect takes the select box, and creates a hidden input element to track the associated value and creates a text input for the selection. It uses the LiquidMetal scoring algorithm to narrow the selection.

Examples

On the left is a traditional select box. On the right is a flexselect control. Just start typing to narrow the selection.

Pick a U.S. President (not pre-selected)

Pick an animal (pre-selected)

TODO: Add more examples for common option overrides

How?

First, load the default styles, jQuery, the LiquidMetal scoring algorithm, and the plugin. 

<link rel="stylesheet" href="flexselect.css" type="text/css" media="screen" />
<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>

It's important that the styles come before the javascript. Now, let's convert your select boxes into some flexselect goodness on DOM ready: 

jQuery(document).ready(function() {
  $("select[class*=flexselect]").flexselect();
});

This will turn all select elements with a class of flexselect into a flex matching masterpiece: 

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

Flexselect also supports some options to override the default behavior:

TODO: Add a detailed list of the options

Where?

Download the "stable" release.

The code is hosted on GitHub: http://github.com/rmm5t/jquery-flexselect. Go on, live on the edge.

Who?

Flexselect was built by Ryan McGeary (@rmm5t) and was inspired by jQuery.quickselect, MooTools Select Autocompleter, Live Search with QuickSilver, and jQuery LiveSearch.

Fork me on GitHub