Giter Site home page Giter Site logo

Comments (18)

desandro avatar desandro commented on July 23, 2024

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.

from isotope.

atacrawl avatar atacrawl commented on July 23, 2024

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!

from isotope.

dimios avatar dimios commented on July 23, 2024

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

from isotope.

desandro avatar desandro commented on July 23, 2024

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

from isotope.

dimios avatar dimios commented on July 23, 2024

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

from isotope.

Malm avatar Malm commented on July 23, 2024

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

from isotope.

gabaum10 avatar gabaum10 commented on July 23, 2024

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

from isotope.

 avatar commented on July 23, 2024

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

from isotope.

wohlstadterm avatar wohlstadterm commented on July 23, 2024

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

from isotope.

desandro avatar desandro commented on July 23, 2024

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

from isotope.

wohlstadterm avatar wohlstadterm commented on July 23, 2024

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

from isotope.

macsupport avatar macsupport commented on July 23, 2024

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...

from isotope.

desandro avatar desandro commented on July 23, 2024

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

from isotope.

macsupport avatar macsupport commented on July 23, 2024

Thanks for taking the time to make the example!!

from isotope.

macsupport avatar macsupport commented on July 23, 2024

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

from isotope.

r3hab-media avatar r3hab-media commented on July 23, 2024

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

from isotope.

doubletaketech avatar doubletaketech commented on July 23, 2024

Thanks for your codepen search example. Very nice!

from isotope.

desandro avatar desandro commented on July 23, 2024

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.

from isotope.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.