is there anyway to filter using search ?

[metafizzy]

is there anyway to filter using search ?

[desandro]

Yes, I'm sure there is a way. As to a recommended way, I'm sorry to say I don't have one for you. I'll leave that up to you.

[atacrawl]

Not sure if this is what you mean by "filter using search," but this is what I did:

$(":text").bind("keyup change", function(){
    var val = $(this).val().toLowerCase();
    $(".omit-me").removeClass("omit-me");
    if (val) {
        $list.children(":not(.blank)").filter(function(){
            return $(this).find("span").text().toLowerCase().indexOf(val) === -1;
        }).addClass("omit-me");
        $list.isotope({ filter: ':not(.omit-me)' });
    } else {
        $list.isotope({ filter: '*' });
    }
});

$("form").submit(function(){
    return false;
});

Basically, with each character you type into the text box, Isotope filters the results based on whether or not that character exists in the name of the item. I accomplished that by adding a class to all the items that returned false, then used Isotope to filter the remaining items.

Here's where it got tricky -- David, this may be a bug -- but I noticed that when all of the items returned false (e.g. the letter "g" didn't show up in any of the items), the Isotope filtering failed. How I got it to work was I appended a blank item to the end of the list of items, then styled it as such:

.blank {
display: none;
height: 0;
font-size: 0;
}

That's why I'm filtering against the items that aren't blank, rather than all items, guaranteeing that an item will be left so that if the keyword search fails, the user knows because there aren't any visible items.

Anyway, I hope this helps you, Dimios.

David, let me know if there's a better way to do it than this. And thanks for making such an insanely awesome plugin!

[dimios]

thanks a lot atacrawl for sharing, I am going to give it a try now.

[desandro]

@atacrawl : Today's commit 011db6 should resolve the issue with the filtering when nothing matches the filter.

[dimios]

@atacrawl do you have some example link on how are you using it? cheers

[Malm]

Here's something like what you're talking about:
http://forrst.com/posts/isotope_js_keyword_based_filtering-V6K

[gabaum10]

The post above was incredibly helpful. I was able to build a pretty robust searching function with the template it provided...

I am having trouble implementing this over my current layout here.

[wohlstadterm]

Malm, thanks for the post! Very very helpful. I was able to build search functionality for my items based off the descriptions.

[desandro]

Last week I put together this simple example http://codepen.io/desandro/pen/wfaGu

[wohlstadterm]

Nice! I'll be reviewing your code desandro for some improvements. Btw, I love your isotope plugin. Very robust!

[macsupport]

Thanks for the search function. I'm trying to also add a reset button and I have tried setting the button click function to

$quicksearch.val('')

and

$container.isotope({ filter: '*' })

But they do not work. Is there a way to reset the search with a button click as well as deleting the search input?
Sorry for my newbie question...

[desandro]

@macsupport Good question. You were close, the problem was that the qsRegex needs to be updated. See http://codepen.io/desandro/pen/Jfbpc

[macsupport]

Thanks for taking the time to make the example!!

[macsupport]

It seems that using search this way interferes with the standard filter method. If I use this search function first it works as it should. If I use another, different filter based on the following code after I do a search, the search function is broken.

$('#filters').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

Is the solution to make a search function as you point out in this code?

// hash of functions that match data-filter values
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// filter items on button click
$('#filters').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
// use filter function if value matches
filterValue = filterFns[ filterValue ] || filterValue;
$container.isotope({ filter: filterValue });
});

Related to #709

[r3hab-media]

Thanks for the update David. Been waiting for this one!

[doubletaketech]

Thanks for your codepen search example. Very nice!

[desandro]

This example is now added to the docs for filtering: http://codepen.io/desandro/pen/wfaGu

I'm locking this issue as it's old.