Filter a list based on user input with jQuery

Question

I have a list of songs, and I want users to be able to filter them by typing into a text field. Here's what I'm doing now:

  $("#filter_song_list").keyup(function() {
    var filter = new RegExp($(this).val(), "i");

    $("ul.song_list a").each(function(){
      if (!$(this).text().match(filter)) {
        $(this).hide();
      } else {
        $(this).show();
      }
    });
  });

Is this the right approach?
Since I'm interpreting the user's input as a regular expression, he can't search for songs with (say) a period in the title without first escaping it ("."). How can I fix this while still maintaining the case-insensitivity of the search?

mkoryak · Accepted Answer · 2009-09-09 17:44:41Z

2

the easiest way to do what you ask for (not any better in terms of performance then your solution) is:

change filter to be the user input, not a regex.

change the filtering line to:

if ($(this).text().toLowerCase().indexOf($.trim(filter.toLowerCase())) > -1) {

answered Sep 9, 2009 at 17:44

mkoryak

58.1k64 gold badges204 silver badges262 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:27:35Z

2

Escape your regex prior to executing it:

var pattern = $(this).val().replace(/([.*+?^${}()|[\]\/\\])/g, '\\$1');
var filter = new RegExp(pattern , "i");

However you're just doing a case-insensitive search for a string within a string. You don't need regular expressions for this. @mkoryak's answer is more suitable for you IMO.

I'd have said jQuery's built-in contains psuedo selector was perfect for you, but it is case sensitive.

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Sep 9, 2009 at 18:14

Crescent Fresh

117k27 gold badges157 silver badges140 bronze badges

Comments

cllpse · Accepted Answer · 2009-09-09 20:11:52Z

2

First of all, make a cached reference to your elements to speed things up:

var cache = $("ul.song_list a");

Then do a simple string match, using the jQuery filter() function, and hide() matched elements:

cache.filter(function ()
{
    return $(this).text().toLower().indexOf( <value from input> ) < 1;
}).hide();

The final snippet of code:

$(function ()
{
    var cache = $("ul.song_list a");

    $("#filter_song_list").keyup(function ()
    {
        var val = $(this).val();

        cache.filter(function ()
        {
            return $(this).text().toLower().indexOf(val) < 1;
        })
        .hide();
    });
});

answered Sep 9, 2009 at 20:11

cllpse

21.8k37 gold badges134 silver badges170 bronze badges

1 Comment

Toni Michel Caubet Over a year ago

it think you need to user .toLowerCase() instead. Also, tried ( jsfiddle.net/aegq4/10 ) and i get all items hidden and never shown again, even if the input matches the text. Are you sure it should work? am i doing something wrong?

Collectives™ on Stack Overflow

Filter a list based on user input with jQuery

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related