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.
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
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.
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.
Lastly, Droplist Filter is also available as a Mantis plugin. You can download that right here.
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.)
<selectid="droplist_test"> <optionvalue="-" >-</option> <optionvalue="name">What is your name?</option> <optionvalue="quest">What is your quest?</option> <optionvalue="color">What is your favorite color?</option> <optionvalue="swallow" selected>What is the airspeed velocity of an unladen swallow?</option> </select>
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.