我正在尝试搜索表并仅显示与输入匹配的结果。

下面的脚本正在工作,但是我需要它仅在第一列中进行“搜索”,并且不需要用户单击输入即可执行此操作,但是在页面加载时获取默认值=“”。我尝试使用val,但无法正常工作。还尝试用td等更改tr,但它开始出现故障。

这是-> JsFiddle ,其中包含我到目前为止所做的事情。

这是jQuery。

$(document).ready(function () {

    $("#searchee").on('click', function() {
        var rows = $("#table").find("tr").hide();
        var data = this.value.split(" ");

        $.each(data, function(i, v) {
            rows.filter(":contains('" + v + "')").show();
        });
    });

});

最佳答案

尝试

<input id="searchee" value="11 6.5 5">


$(document).ready(function () {

    $("#searchee").keyup(function() {
        var rows = $("#table").find("tr").hide();
        var data = this.value.split(" ");

        $.each(data, function(i, v) {
            rows.has("td:first-child:contains('" + v + "')").show();
        });
    }).keyup();

});

演示:Fiddle

如果要继续使用占位符,则
$(document).ready(function () {

    $("#searchee").keyup(function() {
        var rows = $("#table").find("tr").hide();
        var value = this.value.length == 0 ? $(this).attr('placeholder') : this.value;
        var data = value.split(" ");

        $.each(data, function(i, v) {
            rows.has("td:first-child:contains('" + v + "')").show();
        });
    }).keyup();

});

演示:Fiddle

10-05 20:47
查看更多