Droplist Filter

This is a JavaScript tool for adding a little search widget next to any droplist.

Problem

Some web pages have lists with hundreds of items, requiring extra time to scroll through the list to get to your choice. The worst ones are the long unsorted lists. For instance, try finding the word puppet in this list below.

Solution

But why should we have to search it? That's what computers are for! And now with the Droplist Filter, we can make our computers do exactly that. The Droplist Filter will hide all the list items that don't match the word we are searching for. Try this:

click on the blue search icon below
type in a few letters
click the search icon again
now look at the list again

Drupal Module

It's quite easy to add to any web page. I have even written a Drupal module to do this automatically. The module also allows you to change the color scheme of the Droplist Filter with a few clicks, and to configure it to be excluded from or included on only specific pages on your site. Visit the project page on drupal.org to download the module.

jQuery Plugin

Originally, I wrote this widget from scratch in pure JavaScript, but I have since started using jQuery. So now I have a new version of Droplist Filter re-written in jQuery. Much cleaner, and much smaller in size. You can download the latest release here.

To use this, first include the CSS file of your choice (four samples are provided). And of course, include jQuery and the plugin code.

<head>

  <link type="text/css" rel="stylesheet" href="UI_blue/jquery.droplistfilter.css" />

  <script type="text/javascript" src="jquery.js"></script>

  <script type="text/javascript" src="jquery.droplistfilter.js"></script>

</head>

Usage is pretty straightforward:

$("select").droplistFilter();

WordPress Plugin

I have also made this into a plugin for WordPress. Like the Drupal module, you can also easily change the color scheme and configure certain options from within WordPress. Visit its page on the wordpress.org plugin directory to download the Droplist Filter for WordPress.

Mantis Plugin

Lastly, Droplist Filter is also available as a Mantis plugin. You can download that right here.

Standalone Usage

But if you don't use any of the above systems, or just want to see how to do it manually, read on.

First link to the class files in the header. (Notice the UI_blue subdirectory. You may replace that to use one of the color variants.)

<head>

  <link type="text/css" rel="stylesheet" href="UI_blue/DroplistFilter.css" />

  <script type="text/javascript" src="DroplistFilter.js"></script>

</head>

Then add the list normally in the body--

<select id="droplist_test">

  <option value="-" >-</option>

  <option value="name">What is your name?</option>

  <option value="quest">What is your quest?</option>

  <option value="color">What is your favorite color?</option>

  <option value="swallow" selected>What is the airspeed velocity of an unladen swallow?</option>

</select>

Finally, at any point after that, add the following Javascript code--

<script type="text/javascript">

  addDroplistFilter("droplist_test");

</script>

That's it! The result should look like this--

There are sample images provided with the code, but you can customize them to match your site's theme. Most visual elements can be styled via the included .css file. The source code is available for download below. It'd be nice to leave a comment here if you use this. This is distributed under the GPL.

Download

jQuery plugin (jquery.org)
Standalone Javascript (sourceforge.net)
Drupal Module (drupal.org)
WordPress plugin (wordpress.org)
Mantis plugin (local)

Add new comment

Hi

Anonymous — Tue, 04/07/2009 - 19:05

It is intesively slow for selects of thousands s due to copying back and forth, there might be memory leaks too..
any strategy to optimize the code ? maybe playing with visibility instead of copying data

JQUERY not working in IE

Anonymous — Wed, 04/29/2009 - 16:06

Sorry. Last comment realized was not as helpful as needed to be. Jquery isn't working in IE..

When doing search takes long time and returns no form... just the search button.

Again, enjoy the tool but hoping for cross browser functionality.

Not Fully Functional, But Decent

Anonymous — Thu, 04/16/2009 - 11:44

Overall the concept is good. A few recommendations though;

The search button doesn't appear in IE, so you need an unobtrusive method.
A live filter would work better, where as when you type it searches through the values
I noticed when I typed in more than one letter, ie abc, it pulled nothing up, would be nice to see it more functional and pull up anything with those letters in any order or a match case which it appears to be doing now.

Just my few cents, but good work overall.

Dies in IE

Anonymous — Wed, 04/29/2009 - 15:47

Like the tool alot but unfortunately dies in IE 6/7. Try to search and it just hangs. Does this have to do with caching or something else? Works great on all other systems.

JQUERY not working in IE

Anonymous — Wed, 04/29/2009 - 16:07

Ooops meant to post here...

Sorry. Last comment realized was not as helpful as needed to be. Jquery isn't working in IE..

When doing search takes long time and returns no form... just the search button.

Again, enjoy the tool but hoping for cross browser functionality.

chrome not work too

Anonymous — Sun, 05/24/2009 - 01:02

i test it in firefox and it look cool, however, when i try in google chrome, it is not working, it will stop after the search box show.

How would you hide the search icon after use?

Anonymous — Tue, 07/07/2009 - 08:51

Hi Josh,
This droplist filter works fine.
I'm using it in an aps.net gridview where i show the dropdownlist when i click in the cell. When i move away from the cell i make the dropdownlist disappear. I would like to have the droplist filter disappear as well. How should i modify your code to do this?

Thanks

unusable interface

Anonymous — Sun, 01/03/2010 - 18:39

real great of you releasing this to the world but...wow...
totally unusable from a UI standpoint.

unintuitive mode of operation and just feels....unwieldy ..

crossbrowser behaviour is poor (surprising for a JQuery plugin)