使用jquery搜索表行而无需用户单击

时间:2013-09-26 14:03:48

标签: javascript jquery

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

下面的脚本正在运行但是我只需要在第一列“搜索”并且无需用户点击输入就可以执行此操作,但获取默认值=“”on页面加载。我试过用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();
        });
    });

});

1 个答案:

答案 0 :(得分:4)

尝试

<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