jquery - 简单查询表多搜索过滤器

Question

我有一张 id="menu_list_comparisons" 的桌子

我有两个输入过滤器，一个用于名称，一个用于语言。

如果我尝试搜索名称，请工作。

如果我尝试搜索语言，请工作。

如果我想要一个混合，不工作。

<script>
$(document).ready(function(){
//function to filter the results by name
$("#kwd_search").keyup(function(){
    var word=$(this).val()
    if( word != ""){
        $("#menu_list_comparisons tbody>tr").hide();
        $("#menu_list_comparisons td").filter(function(){
               return $(this).text().toLowerCase().indexOf(word ) >-1
        }).parent("tr").show();
    }
    else{
        $("#menu_list_comparisons tbody>tr").show();
    }
    return false;
});


//function to filter the results by lang
$("#kwd_search_lang").keyup(function(){
    var word=$(this).val()
    if( word != ""){
        $("#menu_list_comparisons tbody>tr").hide();
        $("#menu_list_comparisons td").filter(function(){
               return $(this).text().toLowerCase().indexOf(word ) >-1
        }).parent("tr").show();
    }
    else{
        $("#menu_list_comparisons tbody>tr").show();
    }
    return false;
});
});

</script>
<div style="width: 100%; text-align: center;"><br /><label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""><label for="kwd_search_lang">Language:</label> <input type="text" id="kwd_search_lang" value=""></div>

Answer 1

使用逗号分隔选择器

$("#kwd_search, #kwd_search_lang").keyup(function() {

你也可以使用.add

$("#kwd_search").add( $("#kwd_search_lang")).keyup(function() {

代码

$(document).ready(function () {
    $("#kwd_search, #kwd_search_lang").keyup(function () {
        var word = $(this).val()
        if (word != "") {
            $("#menu_list_comparisons tbody>tr").hide();
            $("#menu_list_comparisons td").filter(function () {
                return $(this).text().toLowerCase().indexOf(word) > -1
            }).parent("tr").show();
        } else {
            $("#menu_list_comparisons tbody>tr").show();
        }
        return false;
    });
});