How to case insensitive search regex

Question

So I have this search, example I have this in my table "Test Building" and I can only search the first part of the name and its case sensitive like I input Test but I cant search if I type Building which is my problem so how do I correct this? here's what I did..

building.blade.php

<center>
    <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>
</center>
<script type="text/javascript">
    $("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>

Possible duplicate of [Is there a case insensitive jQuery :contains selector?](https://stackoverflow.com/questions/187537/is-there-a-case-insensitive-jquery-contains-selector) — Anthony L, Feb 25 '18 at 07:02
Possible duplicate of [JQuery how to .find() case insensitive?](https://stackoverflow.com/questions/31104941/jquery-how-to-find-case-insensitive) — Alexander, Feb 25 '18 at 07:05
Just apply something like filter after `.find('tbody')` with your own implementation that will be a case insensitive string comparison. — oleggromov, Feb 25 '18 at 07:41

score 0 · Answer 1 · answered Feb 25 '18 at 07:53

0

You could try: var text_filter = $(this).val().toLowerCase()

Then it will always be lowercase.

answered Feb 25 '18 at 07:53

Kevin

359
2
7
22

score 0 · Answer 2 · answered Feb 25 '18 at 07:56

I'm not sure if there's a nice jQuery-ish way to do that, but here's what I thought about.

You want a simple thing: find all trs in your table's body that contain some text. Text should be treated case-insensitively, so the tr:contains(...) doesn't work for you. There's nothing on the documentation saying we can make it case insensitive. So let's implement our own version!

It's quite simple: instead of using find, you want to get a list of all children of your tbody element and then filter them (which means you will take out those don't match the criteria). The criterion will be a case-insensitive RegExp.

Instead of this line:

$("table").find("tbody").find("tr:contains("+text_filter+")").show();`

Try doing this:

function matchesText (index, element) {
  const regexp = new RegExp(text_filter, 'i')
  return element.text().match(regexp)
}
$("table").find("tbody").children().filter(matchesText)

If you're not familiar with filter, please read about it here. It is a very ubiquitous concept now, when people heavily use functional programming.

I haven't tested this but it should work. The essence is creating a new regexp passing it the text and 'i' flag, which means "become case-insensitive". If you don't know how regular expressions work, please search the internet for it. Here we don't use any of complex concepts from RegExp world.

Again, we could do the same by just matching the case of both strings. Say, making both of them lowercase, like that: text_filter.toLowerCase().

Maybe it's better to use `find('tr')` instead of children to be more specific. There shouldn't be anything else rather than `tr`s in a `tbody` but who knows :-) — oleggromov, Feb 25 '18 at 08:00
Well, it depends on html you have and on the correctness of the other code. Try to apply your analytic skills and debug the code you've got. Split it into parts and check step by step if everything works as you want. If it does, then try to apply my advice. StackOverflow is not the place where all the work is done for you, it's the place where you can find help and explanations. Good luck! — oleggromov, Feb 25 '18 at 10:03

How to case insensitive search regex

2 Answers2