Droplist Filter

This is a Javascript class 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

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.

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

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

Please report any errors

I have tested this on all the major browsers I can run. That means Firefox (OSX & Win2000), IE6 (Win2000), and Safari (OSX). It works perfectly on those. I don't have WinXP or Vista, so I can't run Chrome or IE7.

If you have problems, even if its on a browser I can't use now, please let me know. I will try to fix it. Providing error messages would help a lot. (I am waiting for my WinXP CD to arrive.)

reply
link

Submitted by Josh on Sat, 10/04/2008 - 13:45.

Ok, I now have tested this

Ok, I now have tested this successfully under IE7 as well. And I have gotten zero bug reports from anyone since posting my initial request.

reply
link

Submitted by Josh on Sun, 11/09/2008 - 03:31.

Hi, I would really

Hi,

I would really appreciate if you can answer this question. Would you please let me know if there is any drupal modules that can perform "Autofill Box"?
Like the one in Google search that when you type the first couple of characters, the search box pops up suggestion words to choose from.
I am trying to create a smart online questioner that whenever somebody puts a few characters of their responses in each field; it shows predefined options to choose from via a pop up.
Thanks in advance for your help.

Regards
Adam

reply
link

Submitted by Adam (not verified) on Sun, 01/11/2009 - 14:38.

Adam, A good keyword to

Adam,

A good keyword to search with is "autocomplete". The Drupal site has a few results for that. But I have not used them myself, so no guarantees that any of them are what you are looking for.

http://drupal.org/search/node/type:project_project+autocomplete

Outside of Drupal, there are also a few jQuery/Javascript plugins available, like:

http://code.google.com/p/jqac/

http://plugins.jquery.com/project/jq-autocomplete

http://dyve.net/jquery/?autocomplete

http://www.google.com/search?q=autocomplete+jquery

reply
link

Submitted by Josh on Mon, 01/12/2009 - 17:40.

Thanks for the information

reply
link

Submitted by imprezy integracyjne (not verified) on Fri, 03/06/2009 - 04:48.

there is an issue when the

there is an issue when the select was within a hidden div ( display:none )
when you click the search icon and then reset ( clicking on x )
the select loses its width.

I think the problem is, that it's kinda impossible to get offsetWidth outta the element ( unless explicitly set )

I commented line #186:
$(thisDF).width(thisDF._df.Width);
and it now maintains the original width.

reply
link

Submitted by oth (not verified) on Mon, 03/09/2009 - 00:43.