Cross-browser search in select list

Below we will talk about the search method for the drop-down list (select).

This requires a text entry field and the actual dropdown list itself:

<input class="type-search" type="text" /> <select size="10" id="list"> <option value="val">Text</option> ... <option value="val*n">Text</option> </select> 

To make the search result clearer for the user, you should set the select tag size attribute with a value of 10.

Add to this a little css :

 input, select { width: 300px; margin: 10px auto; display: block; } 

When entering data into the input field, everything that does not match the search string will be hidden, leaving only the desired results in the list.

The search in the list is based on the use of regular expressions, and since the value in the input field is not a constant thing, I use the object expression of regular expressions ( new RegExp () ) instead of the literal one:

 var field = $('#list').find('option'); //   $('#searchInput').bind('keyup', function() { var q = new RegExp($(this).val(), 'ig'); for (var i = 0, l = field.length; i < l; i += 1) { var option = $(field[i]), parent = option.parent(); if ($(field[i]).text().match(q)) { if (parent.is('span')) { option.show(); parent.replaceWith(option); } } else { if (option.is('option') && (!parent.is('span'))) { option.wrap('<span>').hide(); } } } }); 

It can be seen that the search itself is not difficult: the whole interest in displaying the results found.
The fact is that the simple application of properties that hide the elements of the list does not always lead to the expected result.
For example, in some browsers ( Chrome , Internet Explorer ), if you simply add display: none to the option tag, the latter will still be visible.
')
However, a simple feint with the ears of the same option tag, wrapped with a span tag, perfectly understands display: none , and behaves exactly as expected.

PS: This method is neither valid nor semantic, but it works fine in all browsers.

An example .