Question

I’m trying to initiate a search (or rather filter) on keypress for an image library. The user starts typing in the name of an image, and any image name that doesn’t match the search term gets hidden:

<div id="abc" data-imgName="abc"></div>
<div id="abc2" data-imgName="abc2"></div>
<div id="xyz" data-imgName="xyz"></div>

So if a user starts typing in “ab”, then: $('#xyz').hide();

How can I do this? Can I use regex on an attribute?

Answer 1

//bind an event handler to the text input for the keyup event (so the value will have changed by the time this event fires)
$('input[type="text"]').on('keyup', function (event) {

    //convert the value of the text box to lowercase
    this.value = this.value.toLowerCase();

    //cache the elements that match the search
    var good_to_go = $('[data-imgName*=' + $(this).val() + ']').show();

    //hide all the elements that do not match the search
    $('[data-imgName]').not(good_to_go).hide();
});

There is probably a way to do this that performs better but this takes the value of the text input and finds all the elements with the data-imgName attribute that contains the value of the text input. It then finds all the elements with the data-imgName attribute and hides all of the elements that have not been found already.

If you have a parent element to all of the searched elements, you should start all the selectors with it to avoid searching the entire DOM:

var $container = $('#container-id');
$('input[type="text"]').on('keyup', function (event) {
    this.value = this.value.toLowerCase();
    if (this.value == '') {
        $container.children().show();
    } else {
        var good_to_go = $container.find('[data-imgName*="' + this.value + '"]').show();
        $container.find('[data-imgName]').not(good_to_go).hide();
    }
});

Notice that this example also checks if the value of the text box is nothing, if so then it shows all of the searched elements.

Here are docs for the *= (contains) selector: http://api.jquery.com/attribute-contains-selector/

Here are docs for the .not() function: http://api.jquery.com/not

Here is a working demo: http://jsfiddle.net/HRjHV/3/