CODEWITHSUNDEEP
javascriptjquery
Damien
Damien

Reputation: 4319

jQuery filter searching a table cell only works for some items but not all

I'm trying to create a way to highlight table rows based on what a person types into a searchbox. It seems to only work if I type the whole text of the table cell into the search box, not if I type only part of it. Here's my example table row:

<tr class="all rate" style="display: table-row;">
    <td style="vertical-align: middle;">ABB</td>
    <td style="vertical-align: middle;">ABC Boulder </td>
    <td style="vertical-align: middle; text-align:center;">US Dollar</td>
    <td style="vertical-align: middle;">PKSE</td>
    <td style="vertical-align: middle;">COMPANY LOCAL</td>
</tr>

//jquery code
$('td').each(function(i,td){
  $(td).filter(function(){return $(this).text().toLowerCase() == s;}).closest('tr').css('background-color','#ff0000');
}));

That's not the exact code, but my copy & paste wasn't working. If I do a search for "ABB", it will highlight the row with the provided color. But, if I search for "COM" (of company), nothing gets highlighted.

If I search for "COMPANY LOCAL" then it works. So it looks like the search isn't doing a partial search. How do I get it to work with a partial search?

Upvotes: 1

Views: 57

Answers (1)

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23778

I updated the code to use the case in-sensitive search for :contains selector rather than using .each with indexOf see this link for full details.

The main reason is that you are using .each and if a td which has a match is the first td and the rest of the tds do not have a matching character or word that is typed in the input box it will hide it back.

Maybe this helps you out using the indexOf the given text in the tds

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
  return function(elem) {
    return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
  };
});
$(document).on('keyup', '#search', function() {
  let val = $(this).val();
  $('tr>td:not(:contains(' + val + '))').closest('tr').css('display', 'none');
  $('tr>td:contains(' + val + ')').closest('tr').css('display', 'block');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="search">
<table>
  <tr class="all rate" style="display: table-row;">
    <td style="vertical-align: middle;">ABB</td>
    <td style="vertical-align: middle;">ABC Boulder </td>
    <td style="vertical-align: middle; text-align:center;">US Dollar</td>
    <td style="vertical-align: middle;">PKSE</td>
    <td style="vertical-align: middle;">COMPANY LOCAL</td>
  </tr>
  <tr class="all rate" style="display: table-row;">
    <td style="vertical-align: middle;">ABB</td>
    <td style="vertical-align: middle;">ABC Boulder </td>
    <td style="vertical-align: middle; text-align:center;">US Dollar</td>
    <td style="vertical-align: middle;">PKSE</td>
    <td style="vertical-align: middle;">COMPANY LOCAL</td>
  </tr>
  <tr class="all rate" style="display: table-row;">
    <td style="vertical-align: middle;">ABB</td>
    <td style="vertical-align: middle;">ABC Boulder </td>
    <td style="vertical-align: middle; text-align:center;">US Dollar</td>
    <td style="vertical-align: middle;">PKSE</td>
    <td style="vertical-align: middle;">COMPANY LOCAL</td>
  </tr>

  <tr class="all rate" style="display: table-row;">
    <td style="vertical-align: middle;">ABB</td>
    <td style="vertical-align: middle;">ABC Boulder </td>
    <td style="vertical-align: middle; text-align:center;">US Dollar</td>
    <td style="vertical-align: middle;">PKSE</td>
    <td style="vertical-align: middle;"> pakistan</td>
  </tr>
</table>

Upvotes: 1

Related Questions