如何过滤HTML表 - JS

Question

我有一个输入框（搜索框）来过滤我的html表。我的查询能够过滤表格，但是当我清除搜索框时，它不会带回现有数据

例如，如果我有

MacBook 
Acer

然后我搜索M.

它显示MacBook很好

但是当我从搜索框中清除M时，桌子看起来仍然像

 MacBook 

代替

 MacBook 
    Acer

JS

<script>
$(document).ready(function () {
        var typingTimer;                //timer identifier
        var doneTypingInterval = 100;  //time in ms (5 seconds)

        $("#query").on('keyup', function () {
            clearTimeout(typingTimer);
            if ($('#query').val()) {
                typingTimer = setTimeout(doneTyping, doneTypingInterval);
            }
        });
    });

    function doneTyping() {
        var key = $('#query').val();

            $.ajax({
                url: 'search/?query='+key,
                type: 'GET',
                beforeSend: function () {
               // $("#table").slideUp('fast');

                },
                success: function (data) {
                    console.log(data);
                    $("#table").slideDown('fast');

                     var table = $("#table tbody");

                      table.html("");
                        $.each(data, function(idx, elem){
                            table.append(

                                //appending rows here

                            );

                        });




                }            

            });


}
</script>

Answer 1

这段代码：

$("#query").on('keyup', function () {
        clearTimeout(typingTimer);
        if ($('#query').val()) {
            typingTimer = setTimeout(doneTyping, doneTypingInterval);
        }
    });

被绑定到一个keyup事件（ok），但会查看$（'＃query'）是否有值：

if ($('#query').val()) {

如果清空输入字段，则此条件将为false。

只需删除if条件即可。

$("#query").on('keyup', function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});