Jquery: Filter dropdown list as you type

I have used a prototype plugin which filters the contents of a dropdown as you type. So for example if you typed 'cat' into the text box, only items containing the substring 'cat' would be left as options in the drop down.

Does anyone know of a jquery plugin which can do this?

Solution 1:

I was just looking for something similar, and the best one for what I need seems to be the JQuery UI MultiSelect. It turns Multi-select boxes into a pretty slick dual-list view, with live filtering on the master list.

EDIT: New Development!

"Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors."

I'm totally using Chosen on all select-using projects in the foreseeable future.

Solution 2:

Select2 is a fairly recent fork of Chosen and has tons more features (e.g. AJAX + custom HTML for individual items).

Solution 3:

I wrote a little script to do this a few years ago. It could be packaged up as a jQuery plug-in quite easily, probably. You're welcome to it.

I also do this in my PHP Function Reference Dashboard widget if you want to look at the code there.

Solution 4:

Check these plugins:

• SexyCombo
• QuickSelect
• DropList Filter

Solution 5:

jQuery autocomplete plugin

EDIT: I initially linked to the wrong autocomplete plugin.