Improved Dropdown (jQuery plug-in)

Overview

Improved Dropdown is a  jQuery plug-in enables web page authors to create a richer user experience than is offered by the standard browser implementation of the SELECT element. The plug-in supercharges the dropdown controls into combo-box style controls that allow filtering the selection list based on keyboard input.

The following two screen shots tell the story of this plug-in better than a 100 words ever could.

An Improved Dropdown demonstrating groups and disabling items
Headings and disabled items are fully supported.
Filtering down to the potential matches based on keyboard input.
This list is filtered to only matching items as the user types.

Another auto-complete plug-in? Why?

Okay. I am fully aware that there exist a number of freely available jQuery plug-ins with similar functionality. However, none of them seemed to fit exactly what I needed on one of my development projects so I built ImprovedDropDown originally for my own use, and later decided it was worth sharing with the developer community.

Key differences between Improved Dropdown and the typical auto-complete plug-in:

  1. It allows free-text entry to filter the list, but forces the user to pick an item that is in the list.
  2. When filtering/suggesting items it uses open-ended contains logic, not begins-with logic.
  3. It pulls the suggestion list from plain-old client side HTML rather than requiring an AJAX call for suggestions.
  4. It supports non-selectable group headers in the list similar to an OPTGROUP tag in a SELECT control.

Item #3  may look like a step back since AJAX is a cool way to serve up suggestions for a long list of choices. However, I was looking for a super simple way to add functionality to a dropdown without adding the additional complexity of  extra server-side code.

For small to medium sized lists it seemed overkill to implement AJAX handlers on the server all the time. As a bonus, this control will work just fine for static web-sites where the hosting provider doesn’t make available a server-side scripting capabilities.

Do I have to pay for it?

Nope. I’m releasing this project as open-source freeware as a thank you to all the other developers that have contributed greatly to many of my development projects by  contributing their own code to the community. I’ve licensed it under the Apache 2.0 License, which is fairly liberal in terms of what you can do with the code either in commercial or non-commercial software.

Although it isn’t mandated by the license, the one thing I ask in return for using the software is to let me know that you are using it. A shout-out on twitter (@JohnFx), an e-mail, blog post, or comment somewhere on this blog will suffice.  You don’t have to tell me any specifics of your project, unless you just want to brag on it. Primarily, I am just using this request as a way to gauge how much use it is actually getting in the wild.

Is it complicated to use?

If you are new to jQuery, there is a small learning curve there, but even if you don’t know jQuery you can pretty much just copy the included examples to get up and running.

Step 1: Copy the files to your site (jQuery + the 3 ImprovedDropdown files)

Step 2: Add a few references to the HEAD section of the page where you want the control.

Step 3: In the $(document).ready event, call the improveDropdown method to upgrade one or more controls on that page.

Example code (steps 2-3) to upgrade all SELECT elements on the  page to Improved Dropdowns:

</p>
<p>&lt;head&gt;<br />
&lt;script type=&quot;text/&lt;span class=&quot;&gt;// &lt;![CDATA[<br />
javascript&lt;/span&gt;&quot; src=&quot;js/jquery.js&quot;&gt;<br />
// ]]&gt;&lt;/script&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;js/improvedDropDown.js&quot;&gt;&lt;/script&gt;<br />
css/improvedDropdown.css&quot; type=&quot;text/css&quot; /&gt;</p>
<p>    &lt;script type=&quot;text/javascript&quot;&gt;<br />
       $(document).ready(function () {<br />
            $(&quot;select&quot;).improveDropDown();<br />
       });<br />
    &lt;/script&gt;</p>
<p>&lt;/head&gt;</p>
<p>

Want to try it out first

Check out the demo to see how it works.

Sounds Great. Where can I get it?

The project and all the files you need to get started are available on the Improved Dropdown project page at BitBucket (Go Mercurial!) in case you’d like to contribute, follow the project, or just laugh at all the bug-fix changesets that it took to get to the 1.x version.

2 Responses

  1. It’s not working with dynamic data. Let’s say, If i select a country. City listbox will load all cities dynamically using jquery and your plugin not working with City listbox. Can you help please???

    Thanks

    • That’s really not enough information to help you. Could you post an example on Fiddle (http://jsfiddle.net/) and I’ll try to help.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: