0

次のように実行される単純なライブ検索フィルターがあります。

jQuery.expr[':'].Contains = function(a,i,m) { 
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

var $section = $('section');
var $noresults = $('#noresults');

$noresults.hide();

$('#search').bind('keyup focus', function() {
    var input = $(this).val();

    if(input) {
        $section.hide();
        var result = $("section:Contains('"+input+"')");

        if(result.length) {
            $noresults.hide();
            result.show();
        }
        else {
            $noresults.show();
        }
    }
    else {
        $noresults.hide();
        $section.show();
    }
});

正常に動作しますが、複数の値を受け入れるように依頼されました。この現在のフィルターでは、「ABC」と入力すると、文字列「ABC」を含むセクションのみが表示されます。ただし、「ABC DEF」と入力すると、これら2つの文字列がドキュメントの1つまたは複数のセクションに含まれていても、何も表示されません。

取得したいのは、入力フィールドに「ABC DEF」と入力したときに、文字列「ABC」 と 「DEF」を含むセクションのみを表示するフィルターです。

入力を分割することを含むいくつかの解決策を試し、次のバージョンを思いついたが、それは機能しない。このフィルターが複数の値を受け入れるようにするのを手伝ってもらえますか？

$('#search').bind('keyup focus', function() {
    var input = $(this).val();

    var arr = input.split(/[ ,]+/);

    var len = arr.length;

    console.log(arr);
    console.log(len);

    for(var i=0; i<len; ++i) {  
        if(input) {
            $section.hide();

            var result = $("section:Contains('"+arr[i]+"')");

            if(result.length) {
                $noresults.hide();
                result.show();
            }
            else {
                $noresults.show();
            }
        }
        else {
            $noresults.hide();
            $section.show();
        }
    }
});

どうもありがとうございました。

4

2 に答える 2

6

1つの「：contains」メソッド（http://forum.jquery.com/topic/how-to-get-contains-to-work-with-multiple-criteria）から複数の基準を選択することはできないようです。

：containsメソッドをチェーンすると、達成したいことが実行されます。

$('section:contains("ABC"):contains("DEF")');

セレクターを動的に作成して、可変長の配列で機能するようにすることができます。

これがあなたが求めていることを実行するはずのjsfiddleです：http：//jsfiddle.net/sKgpj/

于 2013-02-04T02:47:32.193 に答える
3
  • キャッシュjQuery(a).text().toUpperCase()
  • クエリを空白で分割
  • 分割されたクエリをループして、それぞれをテストします
  • 含まれていないクエリ メンバーが見つかった場合は、false を返します
  • ループ終了時、true を返す

また、カスタム セレクタ コードを変更したくない場合は、section:Contains('ABC'):Contains('DEF').

編集: 翻訳:

jQuery.expr[':'].Contains = function(a,i,m) { 
  var text = jQuery(a).text().toUpperCase();          // Cache `jQuery(a).text().toUpperCase()`
  var words = m[3].split(/\s+/);                      // Split query by whitespace
  for (var i = 0; i < words.length; i++) {            // Loop over the split query, testing each one
    if (-1 == text.indexOf(words[i].toUpperCase())) { // If you find a query member that is not contained,
      return false;                                   // return false
    }
  }
  return true;                                        // At loop end, return true
};
于 2013-02-04T02:43:39.180 に答える