Regex 검색 기능은 첫 번째 열에서만 작동하며 다른 열에 대해서는 두 번째 또는 그 이후 단어에서만 작동합니다.

Question

json 데이터를 기반으로 동적으로 생성 된 테이블에 대해 다음 검색 기능이 있습니다. 검색 기능은 다음과 같습니다

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 행) 만 표시됩니다. 이는 검색이 첫 번째 (이름) 외부의 모든 열에 대해 두 번째 단어 이상에서만 작동하기 때문입니다. Reddit 또는 Stack을 입력하면 아무 것도 표시되지 않습니다. 이 점을 이해하는데 도움이된다면 크게 감사하겠습니다. 나는 Javascript와 Web dev에 일반적으로 매우 익숙하다! 감사!

편집 : 왜 그런지 정확히 모르겠지만 디 바운싱 기능을 추가하면 실제로 수정되었습니다.

Answer 1

같은 문제가있는 다른 모든 사람들에게 debounce 기능을 추가하면이 문제가 해결되고 정확히 이유는 모르지만 ... 너무 빠르게로드되는 것일 수 있습니까? :).

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));