Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
272 lines (245 sloc) 12.7 KB
<html xmlns="" xml:lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="microid" content="mailto+http:sha1:90c9a60ac311baa89f1b48b4a805b0f310361b9d" />
<title>flexselect: a jQuery plugin</title>
<link rel="stylesheet" href="flexselect.css" type="text/css" media="screen" />
<script src="" type="text/javascript"></script>
<script src="liquidmetal.js" type="text/javascript"></script>
<script src="jquery.flexselect.js" type="text/javascript"></script>
<script type="text/javascript">
$.fn.example = function(select, type) {
var div = $("<div></div>").addClass(type)
.append(select.clone().attr({ id: select.attr("id") + "_" + type, "class": type }));
$(document).ready(function() {
$("").attr("href", "");
var president = $("select#president");
$("#example1").example(president, "dull");
$("#example1").example(president, "flexselect");
var animal = $("select#animal");
$("#example2").example(animal, "dull");
$("#example2").example(animal, "flexselect");
$("select").attr("tabindex", -1);
$("input.flexselect").each(function(index) { $(this).attr("tabindex", index+1) });
* { margin: 0; padding: 0; }
body { font-family: Helvetica,Arial,sans-serif; color: #333; background-color: #ccc; font-size: 16px; line-height: 24px; }
h1 { margin: 0; font-size: 60px; line-height: 100px; text-align: center; }
h2 { margin: -30px 0 40px 125px; font-size: 20px; line-height: 20px; text-align: center; color: #999; }
h3 { margin: 24px 0 6px 0; font-size: 18px; line-height: 18px; border-bottom: 1px solid #ccc; }
h4 { margin: 24px 0 0 0; font-size: 16px; line-height: 24px; }
h1 img { vertical-align: middle; }
p { margin: 0 0 24px 0; }
p.example { margin: 0 0 12px 0; }, p.last { margin: 0; }
ul { margin: 0 24px 24px; }
li { line-height: 24px; }
pre { background-color: #333; color: #fff; margin: 12px 0; font-size: 12px; padding: 0 6px; }
pre em { font-style: normal; background-color: #554; }
pre, tt { font-family: monaco,"courier new",mono; }
abbr { border-bottom: 1px dotted #333; }
tt { font-size: 14px; }
a { color: #06e; padding: 1px; }
em { font-style: normal; background-color: #feb }
a:hover { background-color: #06c; color: #fff; text-decoration: none; }
#content { margin:0 auto; padding: 24px; width:700px; background-color:#fff; border: 1px solid #999; border-width: 0 1px 1px 1px; }
#footer { margin:0 auto 24px; padding: 12px; width:700px; line-height: 24px; }
.help { font-size: 14px; color: #888; }
select, input { font-size: 16px; }
.example div.dull, .example div.flexselect { width: 350px; }
.example div.dull { float: left; }
.example div.flexselect { float: right; }
<div id="content">
<h2>a jQuery plugin</h2>
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. <a class="download">Download</a>, 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 <a href="">LiquidMetal</a> scoring algorithm to narrow the selection.
On the <em>left is a traditional select box</em>. On the <em>right is a flexselect control</em>. Just start typing to narrow the selection.
<div id="example1" class="example">
<h4>Pick a U.S. President <small>(not pre-selected)</small></h4>
</div><div style="clear:both;"></div>
<div id="example2" class="example">
<h4>Pick an animal <small>(pre-selected)</small></h4>
</div><div style="clear:both;"></div>
<p><i>TODO: Add more examples for common option overrides</i></p>
<p class="how">
First, load the default styles, <a href="">jQuery</a>, the <a href="">LiquidMetal</a> scoring algorithm, and the plugin.
&lt;link rel=&quot;stylesheet&quot; href=&quot;flexselect.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;
&lt;script src=&quot;jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;liquidmetal.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;jquery.flexselect.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
<p class="how">
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() {
<p class="how">
This will turn all <tt>select</tt> elements with a class of <tt>flexselect</tt> into a flex matching masterpiece:
&lt;select class=&quot;<em>flexselect</em>&quot;&gt;
&lt;option value=&quot;1&quot;>George Washington&lt;/option>
&lt;option value=&quot;2&quot;>John Adams&lt;/option>
&lt;option value=&quot;3&quot;>Thomas Jefferson&lt;/option>
Flexselect also supports some options to override the default behavior:
<p class="how">
<strong>Experimental Ad Hoc Entry:</strong> (The technique for handling this might change) It's possible to allow ad hoc entries into a flexselect input field that don't match the values in the underlying select box. Suppose you had a select box like this:
&lt;select name=&quot;email&quot; class=&quot;flexselect&quot;&gt; ... &lt;/select&gt;</pre>
<p class="how">
If you enable flexselect with custom options that look like this:
allowMismatch: true,
inputNameTransform: function(name) { return "new_" + name; }
The input text field that replaces the select box will not only allow you to match custom values that weren't in the select box, but it will have a name attribute of <code>new_email</code> assigned to it. You can customize the <code>inputNameTransform</code> function however you like. The argument value passed to it is the original name from the select box.
When the form is submitted (with allowMismatch set to true), the original <code>email</code> param will be an empty string and the <code>new_email</code> param will be the value of the text in the input box.
<i>TODO: Add a detailed list of all the options</i>
<p><a class="download">Download the &quot;stable&quot; release</a>.</p>
The code is hosted on
GitHub: <a href=""></a>.
Go on, live on the edge.
Flexselect was built by <a href="">Ryan McGeary</a>
(<a href="">@rmm5t</a>) and was inspired by <a href="">jQuery.quickselect</a>, <a href="">MooTools Select Autocompleter</a>, <a href="">Live Search with QuickSilver</a>, and <a href="">jQuery LiveSearch</a>.
<div id="footer">
<div style="float:right;">
<a href="">MIT
Copyright &copy; 2009 <a href="">Ryan McGeary</a>
(<a href="">@rmm5t</a>)
<a href=""><img style="position: absolute; top: 0; right: 0; border: 0;" src="" alt="Fork me on GitHub" /></a>
<div style="display:none;">
<select id="president" name="president">
<option value="1">George Washington</option>
<option value="2">John Adams</option>
<option value="3">Thomas Jefferson</option>
<option value="4">James Madison</option>
<option value="5">James Monroe</option>
<option value="6">John Quincy Adams</option>
<option value="7">Andrew Jackson</option>
<option value="8">Martin Van Buren</option>
<option value="9">William Henry Harrison</option>
<option value="10">John Tyler</option>
<option value="11">James Knox Polk</option>
<option value="12">Zachary Taylor</option>
<option value="13">Millard Fillmore</option>
<option value="14">Franklin Pierce</option>
<option value="15">James Buchanan</option>
<option value="16">Abraham Lincoln</option>
<option value="17">Andrew Johnson</option>
<option value="18">Ulysses S. Grant</option>
<option value="19">Rutherford B. Hayes</option>
<option value="20">James Garfield</option>
<option value="21">Chester Arthur</option>
<option value="22">Grover Cleveland</option>
<option value="23">Benjamin Harrison</option>
<option value="24">Grover Cleveland</option>
<option value="25">William McKinley</option>
<option value="26">Theodore Roosevelt</option>
<option value="27">William Howard Taft</option>
<option value="28">Woodrow Wilson</option>
<option value="29">Warren Harding</option>
<option value="30">Calvin Coolidge</option>
<option value="31">Herbert Hoover</option>
<option value="32">Franklin D. Roosevelt</option>
<option value="33">Harry S Truman</option>
<option value="34">Dwight D. Eisenhower</option>
<option value="35">John F. Kennedy</option>
<option value="36">Lyndon Johnson</option>
<option value="37">Richard Nixon</option>
<option value="38">Gerald Ford</option>
<option value="39">James Carter</option>
<option value="40">Ronald Reagan</option>
<option value="41">George H. W. Bush</option>
<option value="42">William J. Clinton</option>
<option value="43">George W. Bush</option>
<option value="44">Barack H. Obama</option>
<select id="animal" name="animal">
<option value="a">angelfish</option>
<option value="b">buffalo</option>
<option value="c" selected="selected">canary</option>
<option value="d">dinosaur</option>
<option value="e">eel</option>
<option value="f">flamingo</option>
<option value="g">goldfish</option>
<option value="h">hippo</option>
<option value="i">iguana</option>
<option value="j">jellyfish</option>
<option value="k">kangaroo</option>
<option value="l">llama</option>
<option value="m">moose</option>
<option value="n">narwhal</option>
<option value="o">ostrich</option>
<option value="p">pelican</option>
<option value="q">quail</option>
<option value="r">raccoon</option>
<option value="s">snail</option>
<option value="t">toucan</option>
<option value="u">unicorn</option>
<option value="v">vulture</option>
<option value="w">wildebeest</option>
<option value="f">fox</option>
<option value="x">xenopus</option>
<option value="y">yak</option>
<option value="z">zebra</option>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-604149-6");
} catch(err) {}</script>