2017-12-24 7 views
0

jsonデータに基づいて動的に生成されるテーブルに対して、次の検索機能があります。検索機能は次のとおりです。Regex検索機能は最初の列でのみ動作し、2番目以降のワードでは他の列でのみ動作します

var $rows = $('#toolsTable tr:not(:first)'); 
$('#search').keyup(function() { 

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$', 
     reg = RegExp(val, 'i'), 
     text; 

    $rows.show().filter(function() { 
     text = $(this).text().replace(/\s+/g, ' '); 
     return !reg.test(text); 
    }).hide(); 
}); 

テーブルの例は次のとおりです。

Name | Description | Source | Comments 
-----|-------------|--------|-------------------- 
John | Test one two| Reddit | Here is the comment 
Jay B| One try here| Stack | Second comment 

私はJohnを検索すると、それは完璧に動作します。 Testを検索すると、すべてがフィルタリングされて機能しませんが、oneを検索すると、データの最初の行(Johnの行)のみが表示されます。これは、検索が最初の(Name)以外のすべての列に対して2番目以降の単語に対してのみ機能するためです。 RedditまたはStackと入力すると、何も表示されません。これを理解する助けとなることは大変ありがたいことです。私は一般的にJavascriptとWeb開発者にはかなり新しいです!ありがとう!

EDIT:理由はわかりませんが、デバウンス機能を追加すると実際に修正されました。

+0

もっと簡単な '$(this).text().indexOf(searchTerm)=== -1'テストでフィルタリングできませんか? –

答えて

0

同じ問題を抱えている人は、デバウンス機能を追加することでこれを修正しました。 :)。

function debounce(func, wait, immediate) { 
var timeout; 
return function() { 
    var context = this, args = arguments; 
    var later = function() { 
     timeout = null; 
     if (!immediate) func.apply(context, args); 
    }; 
    var callNow = immediate && !timeout; 
    clearTimeout(timeout); 
    timeout = setTimeout(later, wait); 
    if (callNow) func.apply(context, args); 
    }; 
} 

$('#search').keyup(debounce(function() { 
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

    $rows.show().filter(function() { 
     var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
     return !~text.indexOf(val); 
    }).hide(); 
}, 150)); 
関連する問題