これには、テキスト入力フィールドとドロップダウンリスト自体が必要です。
<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タグにラップされた同じオプションタグの
PS:このメソッドは有効でもセマンティックでもありませんが、すべてのブラウザーで正常に機能します。
例 。