incremental regex filterer

Question

I have a long list of <a> tags, and i'd like to filter through them live; that is, to remove the ones that don't match. I'd filter through them based on the text input in an input field. Regex would obviously search the a tag contents for a match to the input field, but i was wondering how to make it fancier, and actively filter the list like google's search bar does these days. I imagine, a key up function would trigger the regex function.

The part i don't know how to do is this:

[input field]ArI[/]

List:

• ArIes
• ArIstotle

i.e., how to make it check the nth letter of the list item.

EDIT

This is what i have so far, and it doesn't work.

$("input.CardName_Input").keyup(function() {
    var getPhrase = $(".CardName_Input").val();

    new RegExp('^' + getPhrase + '.', 'i');

    $("#Results a").each(function() {
        if (!($(this).val().match(RegExp))) {
            $(this).addClass("HIDE");
        }
    })
});

Your question is unclear. Were you trying to bold the **`I`**? What do you mean by "a list of tags?" — Matt Ball, Jun 11 '11 at 21:10
@Matt Ball - list of tags, my bad. The bold was supposed to represent the nth letter of the string. — C_K, Jun 11 '11 at 21:18
Um. What about [jQuery autocomplete](http://view.jquery.com/trunk/plugins/autocomplete/demo/)? — Matt Ball, Jun 11 '11 at 21:36
@Matt Ball - sort of what i want, not sure if it's worth extracting the key function. — C_K, Jun 12 '11 at 01:54

score 2 · Answer 1 · answered Jun 11 '11 at 21:20

2

As far as I understand you just have to check for the beginning of each list item string?

Then you could use something like /^Ar./i as expression?

In your case you could build the RegExp dynamically new RegExp('^' + searchString + '.', 'i')

answered Jun 11 '11 at 21:20

flori

14,339
4
56
63

Like this http://stackoverflow.com/questions/345194/regular-expression-matching-in-jquery/345806#345806 just replace the `/…/` with the `RegExp` object – flori Jun 12 '11 at 01:38
@Jason: see my answer, it should be at least _closer_ to what you're trying to do. – Matt Ball Jun 12 '11 at 05:25

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

This is what i have so far, and it doesn't work.

The code constructs a new RegExp but doesn't actually do anything with it. Then it passes RegExp (a function) to match. You need to assign the regexp to a variable so you can use it, and pass that to match:

$("input.CardName_Input").keyup(function ()
{
    var getPhrase = $(".CardName_Input").val(),
        re = new RegExp('^' + getPhrase + '.', 'i');

    $("#Results a").each(function ()
    {
        var $this = $(this);
        if (!$this.val().match(re)) $this.addClass("HIDE");
    })
});

N.B. if you don't want special characters in the .CardName_Input to break your code, you'll need to escape getPhrase.

edited May 23 '17 at 12:04

Community

1
1

answered Jun 12 '11 at 05:24

Matt Ball

354,903
100
647
710

i'm not worried about special characters. I changed .val() to .text(), and then it worked perfectly. Thanks a bunch guys! And since you technically put the script together in the form i used, you'll get the check mark. – C_K Jun 12 '11 at 06:08
Good that you got it working. I didn't mean to poach the check mark though. – Matt Ball Jun 12 '11 at 06:24

incremental regex filterer

2 Answers2