Comments (18)
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.
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.
thanks a lot atacrawl for sharing, I am going to give it a try now.
from isotope.
@atacrawl : Today's commit 011db6 should resolve the issue with the filtering when nothing matches the filter.
from isotope.
@atacrawl do you have some example link on how are you using it? cheers
from isotope.
Here's something like what you're talking about:
http://forrst.com/posts/isotope_js_keyword_based_filtering-V6K
from isotope.
The post above was incredibly helpful. I was able to build a pretty robust searching function with the template it provided...
from isotope.
I am having trouble implementing this over my current layout here.
from isotope.
Malm, thanks for the post! Very very helpful. I was able to build search functionality for my items based off the descriptions.
from isotope.
Last week I put together this simple example http://codepen.io/desandro/pen/wfaGu
from isotope.
Nice! I'll be reviewing your code desandro for some improvements. Btw, I love your isotope plugin. Very robust!
from isotope.
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.
@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.
Thanks for taking the time to make the example!!
from isotope.
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.
Thanks for the update David. Been waiting for this one!
from isotope.
Thanks for your codepen search example. Very nice!
from isotope.
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)
- Multiple dropdown/masonry galleries on 1 page
- Isotope resizising container images when applied to squarespace shop
- Filter multiple sections on a page HOT 2
- Error parsing data-masonry on row: SyntaxError: Expected property name or '}' in JSON at position 1
- 你们怎么解决的页面闪烁的问题?How do you solve the page flicker problem?
- How to scroll to a specific element during layout-animation? HOT 1
- Gutter works for columns not rows HOT 1
- error in docs example HOT 1
- filtering twice? HOT 2
- pile ties up when sorting? HOT 7
- Double loading of items when filtering or loading more HOT 1
- Using function and filter at the same time
- Strange spacing with filter active HOT 1
- Site is down HOT 1
- Images Stopped Displaying in Grid and Now in 1 Column. Should be 3 HOT 4
- Trying to filter buttons, search, and hash HOT 2
- Items get correctly displayed on 3 columns when using one filter, but get stacked on a single column if using a different filter HOT 3
- Issue with Icotope tab & Slick Slider HOT 2
- Istotope: CSS transitions/animations HOT 1
- This is a dead project, isn't it? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from isotope.