3

次の関数を使用して要素をフィルタリングし、文字列を含むもののみを表示します-入力時に検索を並べ替えます。

var filter = $(this).val();
var count = 0;    
$(SearchableElements).each(function() {
    if ($(this).text().search(new RegExp(filter, "i")) < 0) {
        // hide
    } else {
        // show matches
        count++;
    }
});​

デモはこちら

テキスト内の一致を強調表示する方法を考えられますか? wrapに何かありspanますか? それとも、jQuery が処理するのは大変なことでしょうか (検索、前にラップされたものを削除、新しい一致をラップする)?

4

2 に答える 2

2

これは、このプラグインを使用して思いついたものです。次のように簡単です。

$('#searchable').highlight(filter);

編集: リンクを更新し、いくつかの問題を修正しました。

于 2012-10-25T12:55:09.860 に答える
1

escapreRegExpまず、検索文字列が正規表現パターンでないことを確認する関数を定義する必要があります。

function escapeRegExp(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

次に、次のようにスクリプトを変更する必要があります。

$(SearchableElements).each(function(){
  this.innerHTML = this.innerHTML.replace(
    /<span\s[^>]*?class=['"]highlight['"].*?>(.*?)<\/span>/g, "$1");
  if ($(this).text().search(new RegExp(filter, "i")) < 0) {
  ... 
  } else {
    var re = new RegExp("(" + escapeRegExp(filter) + ")(?![^<]*>)", "gi");
    this.innerHTML = this.innerHTML.replace(re, 
       "<span class='highlight' style='background-color: #FFFF00'>$1</span>");
    ...

このコードをここでテストします。

于 2012-10-25T13:15:20.283 に答える