おそらくjQueryのクイック検索プラグインに精通している人は多いでしょう。 このプラグインは、すべての要素とそのテキスト表現の事前準備リストを整理し、indexOf関数を使用してキーワードの存在を確認します。
私はこの決定が好きではありませんでした。 この機能はネイティブである必要があると思います。
疑似クラス：contains（）はこれを目的としていたようですが、UFOが到着し、標準で以下を公開しました。
6.6.6。 空白
このセクションは意図的に空白になっています。 （このセクションでは、a：（）擬似クラスを以前に定義しました。）
別の方法を見つけました：属性セレクター[att * = val] 。 これにより、部分文字列を含む属性を持つ要素を選択できます（これは、本質的にindexOfに類似しています）。 したがって、スタイルを動的に追加および削除することにより、CSSでほぼ完全に検索を実行でき、制御ロジックのみがJavaScriptになります。 これを行うには、要素のテキスト表現を含む属性を事前に作成する必要があります。 これは、サーバーで実行するか、クライアントでjavascriptを使用して実行できます。
このメソッドの実装例
if (!document.head) document.head = document.getElementsByTagName('head')[0]; var css = document.createElement("style"); document.head.appendChild(css); function search() { var selector = ''; var searchBox = document.getElementById('searchBox'); var keywords = searchBox.value.toLowerCase().split(' ').filter(Boolean); for (var i = 0; i < keywords.length; i++) selector += (i ? ',' : '') + 'div:not([index*="' + keywords[i] + '"])'; if (selector) css.innerHTML = selector + '{display: none;}'; else css.innerHTML = ""; } $(document).ready(function() { $('div').each(function(key, value) { $(value).attr('index', $(this).text().toLowerCase()); }); $("#searchBox").keyup(search); });
ライブデモ
このセレクターは、すべての最新ブラウザー（Firefox 3以降、Opera 9.5以降、IE 7以降）でサポートされています。
WebKitブラウザーもこのセレクターをサポートしていますが、スタイルの追加と削除に関するパフォーマンスの問題により、この手法を使用することは困難です。
[2012年7月6日]更新：
少し時間を見つけて、古いプロジェクトを修正しました。
ライブデモを更新しました。 CSS3とJavaScript（QuickSearch）での検索の比較ができました。
非常に有用なコメントをしてくれたivan386に感謝します。それにより、速度を正しく測定することができます。
背中合わせの比較
PS：どうやら、両方のオプションはほぼ同じ速度で動作するようです。