以下では、ドロップダウンリストの検索方法（選択）について説明します。
これには、テキスト入力フィールドとドロップダウンリスト自体が必要です。
<input class="type-search" type="text" /> <select size="10" id="list"> <option value="val">Text</option> ... <option value="val*n">Text</option> </select>
ユーザーに対して検索結果をより見やすくするには、値10の
size属性で
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'); 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 ）では、
option ：noneに
display：noneを追加するだけで、後者は引き続き表示されます。
ただし、
spanタグにラップされた同じ
オプションタグの
耳を持つ単純なフェイントは、 display：noneを完全に理解し、期待どおりに動作します。
PS：このメソッドは有効でもセマンティックでもありませんが、すべてのブラウザーで正常に機能します。
例 。