我正在使用 websocket 来获取数据并将其绑定(bind)到 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("&", "&") != activity.toLowerCase()) {
$(this).hide();
}
}
});
}
}
我的问题是我在 html 中有一个过滤器,可以通过输入名称或用户名等来过滤数据。过滤器工作得很好。
但是搜索结果显示一秒钟,表格就会刷新,所以我的搜索结果消失了,整个表格都会显示。
当我停止套接字服务时,数据会保留在那里,因为表不会刷新,因为没有数据来自套接字。
我希望只要搜索输入中有一些文本,搜索结果就会保留。 我使用的方法有什么问题?我该如何解决这个问题?
最佳答案
您可以在更改 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 - 即使我在 javascript 中应用过滤器,表数据也会不断刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54001596/