I'm using websocket to get data and to bind it to the html. Here is my code:
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>
Here is the javascript code of my search filter :
$('#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();
}
}
});
}
}
My problem is that I have a filter in the html to filter the data by typing the name or username etc. The filter works perfectly.
But the search result shows for a second and the table gets refreshed so my search result is gone and the entire table gets displayed.
When I stop the socket service then the data stays there as the table doesn't get refreshed as no data is coming from the socket.
I want the search result to stay as long as there is some text in the search input. What is wrong with the kind of approach I'm using? How can I fix this issue?
You can add a condition to check if the search input has some value before you changing the 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);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.