4

要件を満たさないものを非表示にするだけで、画面上にフィルターを作成しようとしています。

これが私がこれまでに思いついたものです。何が間違っているのかわかりません

Jクエリ：

jQuery('#searchBox').on('keyup change', function() {
    var search = $('#searchBox').val();


    //for each h4       
    $('h4').each(function(){
     var h4id = $(this).attr('id');
        if ($(h4id).contains(search))
            $(this).show();
         else
            $(this).hide
    });

HTML :

<input type="search" name="search" id="searchBox"/>

<h4 id="Adminstrator">Administrator</h4> 
<h4 id="John,Smith">John Smith</h4> 
<h4 id="Jane,Smith">Jane Smith</h4>

(私は JQuery 1.9.1 を使用しています) (つまり、Smith と入力し始めると、"Administrator" h4 が消えるはずです。

4

4 に答える 4

0

正規表現ベースのソリューションを試す

jQuery('#searchBox').on('keyup change', function() {
    var search = $(this).val();
    var regex = new RegExp(search, 'i');

    //for each h4       
    $('h4').hide().filter(function(){
        return regex.test(this.id)
    }).show();
});

デモ:フィドル

于 2013-05-13T02:51:31.143 に答える
0

.contains は、セレクターのテキスト コンテンツを提供しません。セレクタ内の要素のみを検索します。

このアプローチを試してください..これはもっと最適化できます

jQuery('#searchBox').on('keyup change', function () {
    var search = $('#searchBox').val().toLowerCase();

    $('h4').hide();
    $('h4').each(function () {
        var h4id = $(this).attr('id'),
            $text = $('#'+ h4id).text().toLowerCase();
        if($text.indexOf(search) > -1) 
            $(this).show();
    });

});

IDが一意であることを確認してください。

次は、ID に , を含めないでください。

JSFIDDLE

于 2013-05-13T02:02:41.220 に答える
0

これを試してください:- シンプルなものですが、大文字と小文字が区別されます

デモ

  jQuery('#searchBox').on('keyup change', function() {
         var search = $('#searchBox').val();
      $('h4').hide();
      $('h4[id*='+ search + ']').show();

    });

これが役立つかどうかを確認してください。名前は複数の人で同じである可能性があり、同じ ID を持つ複数の h4 を持つことになる可能性があるため、文字列の比較を格納するために id を使用しません。SO私はここでデータ属性とjqueryデータを使用しています。

デモ

 jQuery('#searchBox').on('keyup change', function() {
         var search = $('#searchBox').val();
      $('h4').hide().filter(function(_,oj){
       return $(oj).data('key').toLowerCase().indexOf(search.toLowerCase()) > -1;
     //if your are trying to match the text() then do  
     //return $(oj).text().toLowerCase().indexOf(search.toLowerCase()) > -1;
      }).show();
     });

コードを修正すると、これが意味されます。機能がなくcontains、他のいくつかのタイプミスがあります。

デモ

jQuery('#searchBox').on('keyup change', function() {
    var search = $('#searchBox').val();
  //for each h4       
    $('h4').each(function(){
     var h4id = this.id;

        if (h4id.indexOf(search) > -1)
        //if your are trying to match the text() then do  
        //if ($('#'+h4id).text().indexOf(search) > -1)
            $(this).show();
         else
            $(this).hide();
    });
});
于 2013-05-13T01:51:30.373 に答える
0

jQuery 属性セレクターを使用するだけで、ここを参照してください。たった 2 行のコードで十分です。デモ：

//for each h4       
var h4id = $(this).attr('id');
$("h4").hide().filter("[id*=" + h4id + "]").show();
于 2013-05-13T03:16:46.237 に答える