Question

我正在使用websocket来获取数据并将其绑定到html。这是我的代码：

 var sock = io('http://myip:8080',{transports: ['websocket']});
		
        sock.on('fetchdata', function(data) {
         var html = '';
         var i;
        

         for (i = 0; i < data.length; i++){
             html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
                                 '<td>'+data[i].name+'</td>'+
                                 '<td>'+data[i].username+'</td>';
                                 
                                               
       html+=   '</tr>';
         }


         $('#showdata').html(html);


         });

<table>
<tbody id="showdata">
                           
</tbody>
</table>

这是我的搜索过滤器的javascript代码：

$('#search').keyup(function() {

                var lastValue = $(this).val();
                console.log(lastValue)
                showHide(lastValue, $('#Activity').val());
            });


function showHide(lastValue, activity) {
                    $(".usrRow").show();

                    var v;
                    if (lastValue.length > 0) {
                        $(".usrRow").each(function() {
                            if ($(this).attr("extn").toLowerCase().indexOf(lastValue.toLowerCase()) >= 0) {
                                $(this).show();
                            } else {
                                $(this).hide();
                            }

                            if (activity != "All") {
                                if ($(this).find(".callstatus").html().toLowerCase().replace("&amp;", "&") != activity.toLowerCase()) {
                                    $(this).hide();
                                }
                            }


                        });
                    }
}

我的问题是我在html中有一个过滤器，可通过输入名称或用户名等来过滤数据。该过滤器工作正常。

但是搜索结果会显示一秒钟，并且表会刷新，因此我的搜索结果消失了，整个表都显示了。

当我停止套接字服务时，由于表没有刷新，因为没有数据来自套接字，因此数据保留在那里。

只要搜索输入中有一些文本，我希望搜索结果保持不变。我使用的这种方法有什么问题？我该如何解决这个问题？

Answer 1

您可以添加条件，以在更改html之前检查搜索输入是否具有某些值

var sock = io('http://myip:8080',{transports: ['websocket']});

sock.on('fetchdata', function(data) {
    var html = '';
    var i;

    for (i = 0; i < data.length; i++){
        html +='<tr class="usrRow usrRow0 ex'+data[i].name+' usrRow'+(i+1)+'" extn="'+data[i].name+data[i].username+'">'+
                                 '<td>'+data[i].name+'</td>'+
                                 '<td>'+data[i].username+'</td>';


        html+=   '</tr>';
    }
    var searchText = $('#Activity').val();
    if(!searchText.length){
        $('#showdata').html(html);
    }


});

即使我在javascript

1 个答案: