Search not giving the exact results, Javascript

Question

I have this search function it can search my table but only if I do it exactly the same with data from the table like I have University Gymnasium Building and I must type University for it to work and if I type the 3rd word which is Building it doesn't work it doesn't give result as well as using lowercase no result. Any changes need to be changed in the script?

Here's what I did

building.blade.php

$("body").on("input", "#search-building", function() {
  var text_filter = $(this).val();
  var tr = $('tr');
  $("table").find("tbody").find("tr").hide();
  $("table").find("td").show();
  $("table").find("tbody").find("tr:contains(" + text_filter + ")").show();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group col-xs-4 col-md-6">
  <input type="text" name="search" id="search-building" class="form-control" placeholder="Search..." required>
  <span class="input-group-btn"></span>
</div>


<table id="office">
 <tbody><tr>
  <th>Office</th>
  
  </tr>
  <tr>
  <td>College of Computer Studies - Deans Office</td>
  </tr>
  
<tr>
<td>Academic Center for Continuing Education and Student Success</td>
</tr>

<tr>
<td>Innovation and Technology Support Office</td>
</tr>

<tr>
<td>Computer Studies Faculty Office</td>
</tr>

<tr>
<td>eLearning Competency and Research Center</td>
</tr>

<tr>
<td>Research and Development Coordinating Office</td>
</tr>

<tr>
<td>Technical Support Group office</td>
</tr>

<tr>
<td>CPE Department Office</td>
</tr>
  </tr>

</tbody>
</table>

Please update the snippet I made with relevant HTML and content - also what is the reason for `$("table").find("td").show();` ? — mplungjan, Feb 26 '18 at 09:59
This [**Answer**](https://stackoverflow.com/a/28486089/6248542) will help! — Hamza Abdaoui, Feb 26 '18 at 10:01

score 1 · Answer 1 · answered Feb 26 '18 at 10:08

If you want case-insensitive lookup, don't use :contains as it is case sensitive. You can use filter:

var text_filter = $(this).val();
var rex = new RegExp(text_filter, 'i');
$('table').find('tbody').find('tr').hide();
$('table tbody tr').filter(function () {
       return rex.test($(this).text())
   }).show();

That tests every line against a Regular Expression with your text and with the case-insensitive flag enabled.

Search not giving the exact results, Javascript

1 Answers1