Filtering HTML Table - Ajax

Question

With my scripts below, when i start searching Facebook in my table, it appends the fetched Facebook to the table and now i have two Facebook data on the table. When i clear the search input, the table must move to the default state of having all items

Why is my script not doing such?

PS: sorry for my bad english

<script>
$(document).ready(function () {
        var typingTimer;                
        var doneTypingInterval = 100; 

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

    //user is "finished typing," do something
    function doneTyping() {
        var key = $('#myInput').val();

        if (key.length >= 1) {
            $.ajax({
                url: '/customer/search/?myInput='+key,
                type: 'GET',
                beforeSend: function () {
                $("#table").slideUp('fast');

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

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

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

                                "<tr><td></td> <td>"+elem.name+"</td><td>"+elem.phone+"</td><tr>"

                            );

                        });




                }            

            });

   }
}
</script>

Answer 1

You added a if (key.length >= 1) condition, so if you clear the search input it won't call the ajax function again. You should just remove this condition.