CODEWITHSUNDEEP
javascriptjquery
Paul Chambers
Paul Chambers

Reputation: 411

jQuery hide image without $somestuff in title

I am trying to code a piece where thousands of image thumbnails are on a page and the users want to search for them rapidly and repetatively.

So turned to trusty jQuery. I have come up with the following code: 

$(document).ready(function () {
    $('input[name="search"]').keyup(function(e){
        console.log('checking...');
        var $this = $(this);

        if($this.val().length > 3 || e.which == 8 || e.which == 46) {
           var check = 'img[title*="' + $this.val() + '"]';

           $.each($('.asset'), function() {
               $(this).show();
               $(this).not(check).hide();
           })

            console.log(check);
        } else {
            console.log('False');
        };
    });
});

Which only partially works. The bit it fails on is that $(this).not(check).hide(); simply hides everything without selecting only the images with the search query in their title.

Is there a way to get jQuery to complete this task?

Upvotes: 0

Views: 65

Answers (1)

Barmar
Barmar

Reputation: 781255

$('input[name="search"]').keyup(function(e){
    console.log('checking...');

    var search = $(this).val();
    if(search.length > 3 || e.which == 8 || e.which == 46) {
       $(".asset img").hide();
       $(".asset img[title*='" + search + "']").show();
    } else {
       console.log('False');
    };
});

The problem with your selector is that $(this).not(check) checks whether $(this) matches the check selector, but I'm guessing that .asset are the DIVs containing the IMGs, not the image elements themselves.

Upvotes: 3

Related Questions