UnKnown UnKnown - 25 days ago 11
jQuery Question

table header is getting hidden during autocomplete

As User types in the input i am searching the table and displaying results accordingly .

But the issue i am facing is that the table header is being hidden after the search .

This is my code

$(document).ready(function()
{
$('#searchinputtext').keyup(function()
{
var tr = $('#videosfromtagstable tbody tr'); //use tr not td
if ($(this).val().length >= 2)
{
var inputdata = $.trim($("#searchinputtext").val());
$('#errmsgnovideos').hide();
var noElemvideo = true;
var val = $.trim(this.value).toLowerCase();
el = tr.filter(function()
{
return $(this).find('td:eq(0)').text().toLowerCase().indexOf(val) >= 0;
}); // <==== closest("tr") removed
if (el.length >= 1)
{
noElemvideo = false;
}
//now you fadeIn/Out every row not every cell
tr.not(el).fadeOut();
el.fadeIn();
if (noElemvideo)
if (inputdata !== '')
{
$('#errmsgnovideos').html('No Results Matched').show();
}
else
{
$('#errmsgnovideos').hide();
}
}
else
{
tr.fadeIn(); //show all if length does not match the required number of characters
$('#errmsgnovideos').hide();
}
})
});


http://jsfiddle.net/cod7ceho/307/

Could you please tell me how to resolve this issue .

Answer

Use <thead>

<input type="text" id="searchinputtext" class="form-control" placeholder="Search">
   <span id="errmsgnovideos"></span>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
    <tr class="existingvideos">
         <th width="20%">Name</th>
         <th width="35%">File</th>
         <th width="30%">Course</th>
         <th width="15%">SEEPZ</th>
      </tr>
</thead>
   <tbody class="connectedSortable ui-sortable">

      <tr video-id="48" title="" class="newvideos exercises-add-table-content">
         <td>Dsada</td>
         <td><a href="xxx" target="_blank">dftyr.mp4</a></td>
         <td>
            <span class="btn btn-sm btn-success btn-circle">Five</span>
         </td>
         <td><i class="fa fa-check"></i></td>
      </tr>
      <tr video-id="49" title="" class="newvideos exercises-add-table-content">
         <td>Fds</td>
         <td><a href="xxx" target="_blank">dftyr.mp4</a></td>
         <td>
            <span class="btn btn-sm btn-success btn-circle">Five</span>
         </td>
         <td><i class="fa fa-check"></i></td>
      </tr>
   </tbody>
</table>

demo:http://jsfiddle.net/cod7ceho/308/

or if your the type "i can't modify my html"

$('#videosfromtagstable tbody tr:not(:first)');

http://jsfiddle.net/cod7ceho/312/

Comments