Announcing the Improved Dropdown jQuery plugin!
I’m happy to announce that I’ve released a new jQuery plugin today that will enable web page authors to create a richer user experience than is offered by the standard implementation of the SELECT element in poplar browser platforms. The plugin will supercharge 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 plugin better than a 100 words ever could.
Headings and disabled items are fully supported.
This list is filtered to only matching items as the user types.
Another auto-complete plugin? Why?
Okay. I am fully aware that there exist a number of freely available jQuery plugins 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 ImprovedDropdown and the typical auto-complete plugin:
- It allows free-text entry to filter the list, but forces the user to pick an item that is in the list.
- When filtering/suggesting items it uses open-ended contains logic, not begins-with logic.
- It pulls the suggestion list from plain-old client side HTML rather than requiring an AJAX call for suggestions.
- It supports non-selectable group headers in the list similar to an OPTGROUP tag in a SELECT control.
Item #3 at first glance 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:
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/improvedDropDown.js"></script>
<link rel="StyleSheet" href="css/improvedDropdown.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("select").improveDropDown();
});
</script>
</head>
Sounds Great. Where can I get it?
You can download all the files you need to get started from 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.
What do you think?
I put considerable thought into making the integration of this functionality into existing web pages super quick and easy. I hope that you will find it easy to work with and your users will like the functionality it offers. If you have any comments, complaints, or suggestions for improvement I would love to hear them. Just post a comment somewhere on the blog or drop me an e-mail (see “About” tab for my address).
Filed under: News, Projects | Tagged: jQuery, plugin, projects |
Improving Software 
First of all, I really like your plugin! I’m no kind of programmer, but it was really easy to implement on my table. I do have a couple of questions about it though, I was wondering if you could help me out with. I’m trying to use it in conjunction with the Datatables jquery – I can get your plugin to show up on the select, but the dropdown goes behind the table and anything I select doesn’t change the table at all…any idea what might be going on with this? Also – I have used it with another table filter and it works great on that with the exception of this: If I have 2 selects and they are(without the Improved Dropdown) only showing the visible results based, when I use the plugin – all results are always shown for the entire table instead of only those visible. Do you have any idea why these might be happening or what I might do to get them working correctly? Thanks!
where i can find a demo?
I’ve added a demo link to the article.
John. I like this combobox. I am wondering if I can disable the requirement that free text entry must match a list item. I would like to be able to enter any free text in addition to possibly selecting a dropdown item. This would behave more like a desktop app combobox. For e.g., if I have a select animals list with items dog and cat, I’d like to be able to enter hippo so that hippo is submitted when I submit the form even though it is not in the list of animals. How would I go about doing this?.
I realize a value will need to be generated to pass back to the back end. I’m assuming we would not specify a type for the value and just use a string, so that “hippo” would be sent to the server. My backend code can be adjusted for further validation..
Thanks,
Steve