JQuery - search elements values with given regex

Question

Lets say I have some elements like this

<div class="friendListItem" data-user-name="Andi">Andi<div>
<div class="friendListItem" data-user-name="John">John<div>
<div class="friendListItem" data-user-name="Anderson">Anderson<div>
<div class="friendListItem" data-user-name="John Smith">John Smith<div>
<div class="friendListItem" data-user-name="George">George<div>

I am trying to make a search functionality with regex, that will show elements based on their data-user-name text match. For example, I want when the user types nd in jQuery to catch both the Andi and the Anderson html elements,

when they type 'John' to catch both the John and John Smith elements,

and when they type 'John Smith' to show only the John Smith element.

So far I've come up with this

$('#inputSearchFriends').on('input', function () {
    const searchText = this.value.trim();
    $('.friendListItem').filter(function() {
        const re = new RegExp(searchText);
        return this.attributes['data-user-name'].value.match(re);
    }).show();
}

but it only returns the elements when the text is exactly entered. I also need the regex pattern to be case-insensitive, so if I type 'john' it will still match 'John'. How can I do it?

Take a look at this [answer](http://stackoverflow.com/a/1789952/217867). — Lonnie Best, Jan 17 '17 at 11:40
Your code works, for ignore case use `new RegExp(searchText, "gi")` and @LonnieBest linked answer will work — Satpal, Jan 17 '17 at 11:42

baao · Accepted Answer · 2017-01-17T11:51:51.187

I'd use a simple indexOf() as it is faster than the regex approach, lowercasing everything for the comparison. Demo might look a bit strange as it hides everything first, but you get the idea:

$('#inputSearchFriends').on('input', function () {
    const searchText = this.value.trim();
    $('.friendListItem').hide();
    $('.friendListItem').filter(function() {
        return this.attributes['data-user-name'].value.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
    }).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="friendListItem" data-user-name="Andi">Andi</div>
<div class="friendListItem" data-user-name="John">John</div>
<div class="friendListItem" data-user-name="Anderson">Anderson</div>
<div class="friendListItem" data-user-name="John Smith">John Smith</div>
<div class="friendListItem" data-user-name="George">George</div>
<input id="inputSearchFriends">

you don't use the 'new RegEx' statement which I have, is it faster without declaring a variable with 'new'? — Sartheris Stormhammer, Jan 17 '17 at 11:50
Yes, and indexOf() is definitely faster than regex @SartherisStormhammer — baao, Jan 17 '17 at 11:51

score 1 · Answer 2 · answered Jan 17 '17 at 11:49

1

Try changing this line:

const re = new RegExp(searchText);

To:

const re = new RegExp(searchText,'gi');

answered Jan 17 '17 at 11:49

Lonnie Best

9,936
10
57
97

JQuery - search elements values with given regex

2 Answers2