Кроссбраузерный поиск в select list

Ниже я хочу рассказать о своём методе поиска по списку.
Для этого требуется поле ввода текста и собственно сам список.

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

Добавим к этому немного css:

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

При этом всё, что не совпадает со строкой поиска — будем скрывать, оставляя в списке только нужные результаты.

Поиск в списке основывается на использовании регулярных выражений, а так как значение в поле ввода — величина не постоянная, я использую объект new RegExp():

var field = $('#list').find('option');
 
// собственно поиск
$('#searchInput').bind('keyup', function() {
    var q = new RegExp($(this).val(), 'ig'),
        bol = true;
 
    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()
            }
        }
    }
 
});

Видно, что непосредственно поиск не представляет ничего сложного, весь интерес в отображении найденных результатов. Дело в том, что простое применение свойств, скрывающих элементы списка, не всегда приводит к ожидаемому результату.
Например, в некоторых браузерах (Chrome, Internet Explorer), если просто добавить display: none; к тегу option, последний всё равно останется видимым.
Однако простой финт ушами этот же тег option, обёрнутый тегом span ведёт себя именно так, как ожидается. Такое поведение браузеров для меня загадка. Буду признателен, если кто-то сможет его объяснить.

P.S.: Такой метод не является ни валидным, ни семантичным, однако он отлично работает во всех браузерах.

Пример.