Speed for search result filtering is critical. Its fine for site users to wait for some time (maybe a few seconds) to load the search results but after that filtering better be fast otherwise people lose interest.
To give a simple example of how things are not user friendly is if you go to ebay.com or ebay.in. Its frankly appalling! For every click and every selection, the entire page refreshes. Though its good for showing Ad impressions (which I hate) when browsing an e-commerce site, the usability is lost.
On the other hand, have a look at snapdeal.com or groupon.com and it tells a different story. They fire Apis to their server to get json data and render that via Javascript. Usability is excellent. (no wonder they are doing so well!)
We did client-side search filtering in a couple of portals we built and realized that we should generalize this. That got us started and we ended up with filter.js This is a Javascript module that we have tried and tested on various portals.
Some key features are:
- Category and sub-category based filtering
- Slider based filtering
- Trigger on any HTML element.
- Date filtering (in process)
To use filter.js is simple. Add this to your <head> section:
<script src="https://raw.github.com/jiren/filter.js/master/filter.js" type="text/javascript"></script>There are dependencies on how to render HTML components. Currently, its our own custom code but we have plans to upgrade this to integrate with mustache or handlebars. For now, we live with it 😉
Defining the search criteria and the JSON objects
You can generate JSON data in any way you wish. Remember that the top-level entity will be used for rendering the view – in this case ‘person’.
var people = [{person: {name: 'Jiren', age:26, country: 'India', country_id: 1, states : [{ state : 'MH', state_id : 3 }, {state : 'HN', state_id : 4}] } }, {person: {name: 'Joe', age:25, country: 'USA', country_id: 2, states : [{ state : 'MH', state_id : 3 }, {state : 'HN', state_id : 4}] } } ]Defining the view function
We have some custom code for rendering HTML components. This assumes that you have the json objects in place. Here is an exmaple:
var view = function(person){ name = this.span({'class': 'name'}, person.name); age = this.span({'class': 'age'}, person.age); country = this.div({'class': 'country'}, person.country); return this.link('/demo/' + person.id ,{'title': person.name}, [name,age,country]); };A more detailed example is available in the examples given on github. To define the filter criteria, all you need to do is pass a combination of the HTML components, the events and the JSON object attributes. For example:
var settings = { filter_criteria: { country: ['#country_list input:checkbox .EVENT.click .SELECT.:checked', 'country_id'], age: ['#age_list input:checkbox .EVENT.click .SELECT.:checked .TYPE.range', 'age'], price: ['#price_filter .EVENT.change .SELECT.:input .TYPE.range', 'timeleft'] states: ['#state_list input:checkbox .EVENT.click .SELECT.:checked', 'states.ARRAY.state_id'], } }; /* Trigger the filtering */ var fJS = new filterJS(people, "#people_list", view, settings);Here is how this works:
Category based filtering
['#country_list input:checkbox .EVENT.click .SELECT.:checked', 'country_id']All the checkboxes under the <div id=country_list> are used as the selectors. When the checkbox click event is triggered for any checkbox, all the checked check-boxes are used as the filter criteria and the JSON objects which match the ‘country_id‘ will be rendered using the view function. Rendering is done only once and then the display is toggled as needed.
Range based filtering via checkbox
age: ['#age_list input:checkbox .EVENT.click .SELECT.:checked .TYPE.range', 'age']Its exactly the same as shown earlier except for the additional .TYPE.range attribute. This tells the filter.js that it needs to pick up the range from the HTML element for filtering. This is typically added like this:
<div id='age_list'> ... <input type='checkbox' value="below-30"> <input type='checkbox' value="30-50"> <input type='checkbox' value="50-above"> ... </div>So, now the filtering will trigger on the the range of age – this can be customized as you wish. Note the boundary limiters ‘below-30′ and ’50-above’.
Range based filtering via slider
price: ['#price_filter .EVENT.change .SELECT.:input .TYPE.range', 'timeleft']Here the slider id change event triggers the filter and the value of the slider is used to filter the JSON data. Here is the sample HTML code. Ensure that you have jquery-ui.js included in the header.
&lt;script type="text/javascript"&gt; $( "#price_slider" ).slider({ range:true, min: 0, max: 1000, values:[0, 500], step: 5, slide: function( event, ui ) { $( "#price_range_label" ).html(' <h2>Demo Time</h2> Have a look at <a href="http://eloquentstudio.github.io/filter.js/" target="_blank" rel="noopener">http://www.goodinkind.com/services</a> and <a href="http://eloquentstudio.github.io/filter.js/" target="_blank" rel="noopener">http://www.goodinkind.com/nonprofits</a> to see filter.js in action in 2 different scenarios! Alternatively, you can also clone the <a href="https://github.com/jiren/filter.js" target="_blank" rel="noopener">GitHub repository</a> and see the demos/filterjs.html We look forward to some feedback from you and hopefully some contributions! Filter away! <h2>Update1</h2> Thanks for the overwhelming response! I have added mustache templating for rendering the HTML view snippets. Define mustache.js template in HTML page. <pre>Demo Time
Have a look at http://www.goodinkind.com/services and http://www.goodinkind.com/nonprofits to see filter.js in action in 2 different scenarios!
Alternatively, you can also clone the GitHub repository and see the demos/filterjs.html
We look forward to some feedback from you and hopefully some contributions!
Filter away!
Update1
Thanks for the overwhelming response! I have added mustache templating for rendering the HTML view snippets.
Define mustache.js template in HTML page.
View function:
Josh Software 
we tried similar rules on one of given assignments….
– as mush as possible have minimum data exchanged between browser and server
– make use of js, json to hold any temporary data to be used on triggers
– keep data loaded(json) when you know for sure that its going to be triggered
Is this accessible?
You can clone or fork from the github https://github.com/jiren/filter.js
‘accessible’ means accessible to people with handicaps, not that you can get the code.
accessibility is often a problem with heavy use of Javascript. It’s not always simple to manage and it is a legal requirement in many parts of the world
Looks great. I wonder how /where/if you incorporate ajax-calls to the server to get the new set of JSON-objects which satisfy the new filter-constraints. Is this generalized in any way?
Good point. I made the changes and updated on git version 1.1 for event unbinding and again apply new filter criteria.
So, you can fetch the new JSON object from the normal AJAX request and then do the following:
$(‘#service_list’).html(”); // clear html target list.
fJS.unbindEvents();
fJS = filterInit();
See the demo for the above reference.
will it supports for pagination results too?
filter.js is not supporting the pagination. Pagination defeats the purpose of search filter on client side.
Thank you for your great tool but I don’t understand how to getearne the json by using Ajax requests so as to get the data from the database. I want to seach into a database of thousands of people and select them according to some criteria. I cannot load all the data when loading the page.Can you show us an example of code that communicates with a database through Ajax/jQuery so as to getearne the json? Thanks a lot, it will serve a lot of people.
Can we use this with jquery templates ?
Yes, you can use jquery template.
In view function return $.tmpl(template, json object)
Json object is view function arg
I am trying to replicate the function of the check box with a link, but not sure how to do that. I have even tried to fire the click event of the check box on clicking the link but I did not have much success on that. Please suggest me if I am missing something.
First, link is not a html input element, so it has no value. Therefor you have to define hidden field for that and apply filter on it like slider(in demo). i.e HTML: Price: 100 – 200
Set filter criteria on hidden field filter_criteria: { linkfilter: [‘#link_filter .EVENT.change .SELECT.:input .TYPE.range’, ‘amount’] }
Bind event on link: $(‘#filter_by_link’).click(function(e){ e.preventDefault(); fJS.filter(); // fJS is filter.js object. });
Also I am going to update demo for this.
Thanks for the reply. My situation is something like I have different categories of filter like date range and status types(note that this is not a range) and all these filtering has to be done on click of the link rather than check boxes. I somehow managed to achieve it through a combination of link filter in the demo for date range filter and using hidden check boxes on clicking the link for status type to filter the data. Please suggest if what I have done is the best solution. Also I have to do sorting of the filtered search results. Is there a way to combine sorting and filtering.
I updated demo and readme for filter using link. There is example of range filter using link. You can also use for single value by setting data-value of link.
Hidden field is better option then hidden checkbox. For sorting you can use any jquery sorting plugin like jqery.tinysort.js
Hi jiren,
is it possible to do a range filter with a non-hidden input field? That means, in the input field you type in only the maximum-number. Then it shall be filtered: 0 to maximum-number (below-‘maximum-number’).
Hi Toby
Filtering logic return only for single input, so we can’t merge two input value and make single filtering criteria.So currently you have to add hidden input and change value when text input or other input value change.
Thank you for your answer. But I asked for one input value only. And I need to filter for the range between 0 and the input value. Is this possible?
Yes this is possible. You can update hidden field value like 0-(your inout value).Make 0 as fixed value. You can check link filter code in example(filterjs.js – line:39) for updating hidden field value and applying filter.
Thank you once again for your kind replay. Unfortunately it’s not working when I tried this:
html:
filterjs.js:
$(‘#filter_by_slider’).change(function(e){
e.preventDefault();
var urange = “0-“+$(this).data(‘value’);
$($(this).data(‘target’)).val(urange));
fJS.filter();
});
…
filter_criteria: {
u: [‘#u_filter .EVENT.change .SELECT.:input .TYPE.range’, ‘variable’],
},
It would be great if you could help.
Can you send me your html and javascript(just save page from browser and zip it), so I can check it and let you know.
Hi
Thanks for the great article. I have created search results filter following the example above, however I have few questions. In my case the filter links will be created dynamically based on the search results. Also I can select only one filter per category. When I select a filter on category 1 I need to update the filters in other category. For eg. consider the scenario. Category A > Filter A1(5), Filter A2(3) Category B> Filter B1(2), Filter B2(4), Filter B3(2) and if I select Filter A1, Filter A2 should be hidden and filters under Category B will look like Filter B1(1), Filter B2(4). And if I unselect the I should update the other categories and filters accordingly. My initial idea to solve this is to get hold of the filtered JSON data so that I can redraw the filters even though I do not know how to get hold of it at this time. Remember the filters are initially created and rendered dynamically from the search results JSON. So if I can get hold of the filtered JSON I can pass it as an argument to the same function and re render the updated filters. I would appreciate any suggestions in this regard.
Thank you,
Sri
You can access filtered JSON data using registering callback, for this pass functions in ‘settings’. Each callback call after filtering event, here ‘result’ is filtered JOSN data.
i.e
var filter_callbacks = {
logger: function(result){
$.each(result, function(i,v){ console.log(v.id)})
}
};
var settings = {
filter_criteria: {
country: [‘#country_list input:checkbox .EVENT.click .SELECT.:checked’, ‘country_id’]},
callbacks: filter_callbacks
};
You can find example for this on github(https://github.com/jiren/filter.js)
Thanks for your reply. But am not clear on how you modify the datasource.
I understand that we need to add a parent object “product” to the string, but how can we accomplish that?
Many thanks
You don’t have to modify datasource, you can generate json using root name. In your case root name is product for each product record in JSON.
Thank you for your reply. Perhaps you can shed more light on my situation.
I am using ASP JSON Helper (Jsnon.Encode) to generate the JSON. The problem is that the string comes out with no root object. How can I use a JS forloop to add the root to the JSON string.
My JSON string looks something like this:
“[{“ProductID”:1,”ProdName”:”product1″,”Size”:”L”,”Color”:”Green”},
{“ProductID”:2,”ProdName”:”product2″,”Size”:”XL”,”Color”:”Red”},
{“ProductID”:3,”ProdName”:”product3″,”Size”:”XXL”,”Color”:”Silver”}
]”
Thank you for your great work!
Two questions:
– Is it possible to string together single values for link filtering? Like for example 31 and 34? (and
maybe have it also check the corresponding checkboxes?)
– Can I change the filter behaviour, so that all results are shown if no boxes are checked?
Any help would be greatly appreciated!
Thanks again,
Sebastian
Yes, you can set link input like(ref: examples/filterjs.html and examples/filterjs.js )
<a id="filter_by_link" href="#" data-value="50" data-target='#link_filter'>Price: 50 </a>
<input type="hidden" id="link_filter" value="50" />
Set the ‘filter_criteria’:
link_filter: ['#link_filter .EVENT.change .SELECT.:input', 'amount']To set corresponding checkboxes you have to implement code in the click event.
$('#filter_by_link').click(function(e){fJS.filter();
// corresponding checkbox selection implementation
});
For second point you can set ‘and_filter_on: false’ in filter criteria
but implemented ‘and’ – ‘or’ filter function is not working correctly , I am working on it.
On complete i will let you know.
Thanks for your quick reply and help!
I know how to filter by link with an amount like 30-50, but can I also string together different single values or ranges? Like “30-50″+”green”+”c” to give users a number of filter presets?
Best regards,
Sebastian
This is a good idea. I have not done this yet. Do submit a pull request if you do this. I shall try to do this when I get some free time.
hiya – awesome tool!
is it possible to pull json data from an externally hosted file? how do you do this?
Yes, it is possible. You can get json file data and add to tag.
$.get(‘test.json’, function(data){
$(‘body’).append($(”).html(data);)
});
Thank you for your great tool but I don’t understand how to generate the json by using Ajax requests so as to get the data from the database. I want to seach into a database of thousands of people and select them according to some criteria. I cannot load all the data when loading the page.
Can you show us an example of code that communicates with a database through Ajax/jQuery so as to generate the json? Thanks a lot, it will serve a lot of people.
Hello, how do you generate the json?
Thank you
I have generated json from rails model and hardcoded to html for demo purpose only.
You can get json by calling api url using ajax or directly embed json object as javascript var in your html page.
Thanks a lot jiren 🙂
Hi Jiren,
Can you provide a complete basic example? I’ve tried myself but my example only returns one node. After filtering it only returns one attribute.
You can find my example here: http://www.plenaforma.nl/webtest/filter_JS/
Hi,
Your json format is incorrect, in json data after first person record you have to close “}”.
I have missed in documentation every json element has ‘id’ field.
i.e [{ person: {id: 1}}]
Also template had some parent element
i.e
Name: {{name}}
Age: {{age}}
Country: {{country}}
Thanks for the answer, my example is working now.
This is a great resource thank you. I also need to load my data from a database and seem to have success fully loaded it in. I seem to loose all the data every time I try to filter the results, I don’t suppose you could shed any light?
Cheers.
Richard, Can you post javascript, html code snippet so I can check it?
ALl has been sorted no, it was me adding in information to my JSON that didn’t need to be there.
I don’t however seem to be able to get the search to filter using multiple links?
Would you be able to give me a pointer on multiple link filters please. I have managed to get this working based on one data range. But am unable to get this to work on multiple ranges. I’ve pretty much duplicated all that was there with the original link filters but no joy.
Price: 200 – 300
Style: Print
//
$(‘.filter_by_link, #clear_link_filter’).click(function(e){
e.preventDefault();
$($(this).data(‘target’)).val($(this).data(‘value’));
fJS.filter();
});
$(‘.filter_by_style’).click(function(e){
e.preventDefault();
$($(this).data(‘target’)).val($(this).data(‘value’));
fJS.filter();
});
//
link_filter: [‘#link_filter .EVENT.change .SELECT.:input .TYPE.range’, ‘amount’],
style_filter: [‘#style_filter .EVENT.change .SELECT.:input .TYPE.range’, ‘style_id’]
Hi Jiren,
The filter functionality works great! However, is it possible that it is not supported by IE7?
Sorry, my bad. Filtering in fact does work in IE7. There was an error in my Mustache rendering..
I am using ASP JSON to generate the object from an SQL source. The resulting object does not contain a top-level entity.
var products = [
{“ProdID”:1,”ProdName”:”816 661 120″,”Accent”:”Hammered”,”Finish”:”Gold”,”Length”:6.45},
{“ProdID”:2,”ProdName”:”816 661 130″,”Accent”:”Hammered”,”Finish”:”silver”,”Length”:6.25},
{“ProdID”:3,”ProdName”:”820 654 050″,”Accent”:”Bead”,”Finish”:”Gold”,”Length”:5.25}
]
How can I write the “view” statement to select a single pair of values? Using “ProdID.Accent” does not work.
If it is possible to change the data source, I am of course open to that.
Thanks.
Yes, you have to change datasource format.
i.e [ {“product”: {“id”:1,”ProdName”:”816 661 120″,”Accent”:”Hammered”,”Finish”:”Gold”,”Length”:6.45}}]
Thank you. I have it working very well now. One question remains. I have about 2,500 JSON records to show, each with a thumbnail image, much like in your examples. Seems to be taxing to load that many initially, although once loaded the filtering works very quickly.
Where would I begin to paginate the results?
Hey,
I was developping a filter via some select box. For those who are searching how to do that with filterjs here is my solution inspired by the example with the slider element :
HTML :
Type
Tous
Appartement
Bureau
Commerce
Garage
Maison
JavaScript :
In :
jQuery(document).ready(function($) {
I put :
// TYPE
$(“#typeInput”).val(‘all’);
$(“#type select”).change(function () {
$(“#typeInput”).val($(“#type select”).val());
fJS.filter();
});
And in the filter_criteria, I add :
type: [‘#typeInput .EVENT.change .SELECT.:input’, ‘nature’]
Finally I change a bit filter.js to have a value that disable the filter (the value “all” in my select box)
after : base.settings.selector.forEach(function(s) { (line 139)
I add :
if($(s.element).filter(s.select).val() != “all”)
And I close it before closing : base.settings.selector.forEach(function(s) {
Hope it can help someone,
Thank you for your work jiren.
Great customization.
I’m trying to follow this to set up using a Select tag for filtering instead of a checkbox – can you help ?
It looks like BDg’s post may have had its formatting messed up. His HTML did not come across at all, and his comment about what to put after “jQuery(document).ready(function($) {” has an addtional “})” in it which causes formatting errors when I try it (or is it missing the starting “$(‘#typeInput’).click(function(e){“) line ?)
Also the line numbers are different in filter.js now too. “base.settings.selector.forEach(function(s)” is not line 139 in filter.js
After this I had updated the filter.js code so van you send me code so I can check and let you know.
It’s OK – through some trial and error, I figured it out. The Select tag I assigned an ID value to and made the top default option to have a value of “all”
Note: I’m not sure how well this site handles HTML tags – I’ll use PRE tags around my snippets
For the Filtering I add the initial setup for city_state_list drop down inside the “jQuery(document).ready(function ($) {” bit at the top of the filterjs.js file so it would know to re-filter when a value changed
// Initial set up for city/state select box when page loads $(“#city_state_list”).val(‘all’); $(‘#city_state_list’).change(function (e) { fJS.filter(); });Inside filterjs.js where the “filter_criteria:” is assgined to the “settings” variabled I added the following filter criteria for the city_state_list select box
Note: ‘CityState’ was the name of the JSON field that was hilding the ciy/state values I wanted to filter by
OK – that pretty much did it for filterjs.js – but I had to change filter.js so that when my drop down had a value pf ‘all’ it did not attempt to filter for ‘CityState’ – looking for those with a value of ‘all’
So – Like Bdg I modified it so that if ‘all; was a value I just excluded city_state_list from being used to filter the data. I did this by modifing the “filter: function () {” in filter.js
I found the line in it that started looping trhough all the filters:
base.settings.selector.forEach(function (s) {and put an IF stament at the top to only include filters whose current value was not ‘all
base.settings.selector.forEach(function (s) { if ($(s.element).filter(s.select).val() != “all”) { . . . CODE THAT WAS INSIDE LOOP . . . } } });and that pretty much did it.
Crud – even with the PRE tag this blog commenting software stripped out the select tag – I’ll try again for the select tag – using < and > HTML Entities this time
<select id=”city_state_list”>
<option value=”all”>All Locations</option>
<option value=”AL – Decatur”>AL – Decatur </option>
.
.
.
</select>
Hello,
congratulations for the js you have written, I would say … very useful and simple to use.
Can I ask for your help?
I have the following list:
Filtra per SERVIZI
Disabili
How can I integrate it in the array?
How can I search through the action js?
In array I added:
“servizio_disabili”:[{“to_param”:”‘.$count.'”,”category_id”:1}],
where $count is a numeric variable autoincrement, is it correct? is it necessary?
and:
var settings = {
filter_criteria: {
category: [‘#category_list input:checkbox .EVENT.click .SELECT.:checked’, ‘service_categories.ARRAY.category_id’],
servizio_disabili: [‘#servizio_disabili_list input:checkbox .EVENT.click .SELECT.:checked’, ‘servizio_disabili.ARRAY.category_id’],
},
But it does not work, how?
Thank you.
JSON is a static format so we can’t use the any dynamic statement ‘$count’ in it, so it is not going to evaluate.
For making auto-increment $count you have to make loop and increment it before filter.js rendering.
i.e
var count = 0;
for(attrs in ‘JOSN var’){
attrs[‘count’] = count;
count++;
}
or you can use jquery ‘$.each(function(){})’ for looping.
Hello!
The variable $ count is not a problem, the problem is that when I enter:
The problem lies in the script that does most of the checkbox control.
I have a table in the database:
id | animal | car | tv | breakfast
56 1 0 1 1
34 1 1 1 0
So please I would like the checkbox fields with the above table and selecting the id they have that particular service.
How can I integrate it?
Can you refer doc on https://github.com/jiren/filter.js. I have updated there basic and more clear example or you can send your “html” and “js” code so I can check it and help you in integration.
Sure, here’s the link with my code …
http://www.allevamenticinofilitaliani.com/filter/examples/filterjs-map.php
The problem also lies in the fact that each result can have ‘more’ SERVICES ‘… how to integrate it into the script?
I found the problem. In “services” json data you have set last service has typo mistake
servizio_ instead of servizio.
Thank you! Now it works.
I can associate multiple services to an array element?
For example: ‘Robertino must have both’ Wi-fi ‘and’ TV ‘.
Thank you.
Jiren, could you help me?
Roberto your filter is correctly working in your example link. I don’t see any problem in that.
You can download the package .rar here: http://dl.dropbox.com/u/50056863/filter.rar
Sorry, I had the wrong post!
Can you give me sample json data or page link with multiple services associated with array so I can give you exact solution.
Would you like to see the structure of the database?
No I want just json data you had included in html.
Interesting script – I like its simplicity.
Has anyone tried to use this in connection with an jquery image slider/roundabout, such as roundabout or slidesjs? If the slides are dynamically generated based on form input/search input and data is retrieved from php/mysql, this filter seems like something that could parse out slide results. The biggest question may be how to eliminate placeholders for the filtered results. Seems like a perfect combination.
This is a fantastic resource and am glad to have found it. But I’m having major trouble with it in ie. Not even you demo on github works correctly. It there an issue with ie?
Please please help. This solution does everything I am trying to achieve. There just seems to be an issue with ie. The slider handles do not drag. Is there any issues or any way it can be fixed?
This issue occurring because there is no indexOf function for Array in IE. I have fix it this issue. You can checkout on example link(http://jiren.github.com/filter.js/filterjs.html)
You can see this in the source code here:
http://www.allevamenticinofilitaliani.com/filter/examples/filterjs-map.php
Here you can download the compressed file: http://dl.dropbox.com/u/50056863/filter.rar
No help?
Hello sir
I have problem in which i have to seperate out keys and values of a json file seperately and the json file if of multiple level depth. I have done the printing part of the json file using javascript and I am not getting how to seperate out key/value pairs. if u can help me in any way then please reply.
I am not getting your problem. Can you give me more detail or example what you have done.
{
“LibName”:”AllLib”,
“SubCat”: [
{“Cat”:”abc”,
“SubCa”: [{“Cat”:”Logic”,
“SubCaty”: [{“Cat”:”Multiv
“PartList”: [
[“abc”,”74121″,”M”,”P”]
,[“abc”,”74122″,”R”,”P”]
,[“abc”,”74123″,”R”,P”]
,[“abc”,”54L121″,”M Inputs”,”PULSE,IO_LEVEL,MNTYMXDLY”]
,[“abc”,”54L122″,”R”,”P”]
,[“abc”,”54L123″,”R”,”P”]
]}
]}
]}
]}
if this is a kind of json given to us then i have to acces from AllLib to PartList and print all key/value pairs differently.
how should I proveed for this?
I am able to print the complete file on browser but I couldn’t identify key/value pairs seperately.. Please help me in identifying those.
This script is exactly what I’ve been looking for in a long time, and right now I’m trying to get it to work with a website to add a filter for a database with roughly 3000 records. I seem to be having problems loading all records at once though. Even when I limit the SQL select to, let’s say, 500 records, the filter reacts with a significant delay (roughly 1-2 second whenever I move a slider or change a select box). I’d love to see an example of how to fill the variable that contains all the data dynamically based on the current filter selection so I don’t have to load all data when the page loads. And while I agree that pagination defeates the purpose of a filter for smaller recordsets, it might be vital for large recordsets, because otherwise, it slows down too much.
If you want make it dynamic then you can modify filter.js for implement before filter callback just like after filter callback. In before filter you have to initialize filter.js object again.
Have you got the solution (Filter+Pagination for large recordset). I am also looking for the same.
For pagination see this comment
blog.joshsoftware.com/2011/09/28/filter-js-client-side-search-filtering-using-json-and-jquery/#comment-5060
This script is really amazing!
But I have one question concerning a filter over multiple variables – given the json object … ‘var-a’:’1′,’var-b’:’1′,’var-c’:’0′ …
If the box a is checked, show elements where var-a is ‘1’…
If the box b is checked, show elements where var-b is ‘1’…
If the box ‘All’ is checked, check boxes a,b,c and show all
Can I do this with one filter?
Thank you!
I have a similar problem: I need both AND filters and OR filters in my site. Is this possible with filter.js?
Right now only AND filter is supported. I am going to implement OR filter.
That’s great! Thanks a lot.
Hi thank you for going to implement OR filter, because this would solve my problem, either. Can you imagine how long it will take to implement this feature?
Regards, T.
Hi thank you for sharing such useful thing and I was looking to develop the same. Now I have decided to use filter.js for my search result filter. Thank you once again.
While going through the article above I found some spelling mistakes or I don’t know if you have mentioned it purposely or what like appaling and Apis (appealing and API’s)
I was looking for your mail but didn’t find any so commenting here, you can remove the comment if you want.
Thank you,
RK.
Jiren, thanks for this script. I was creating my own multiple slider and checkbox filter, but you already did it!
3 questions:
– pagination using this plugin: http://www.dev4.us/jquery-plugins/smFilteredPagination should be possible. Perhaps you can integrate it.
– how do I call addmarkers from the jquery template view?
– how can I use a searchbox with autocompleet to filter the data?
Hope you can help!
– For pagination you can implement after filter callback to render pagination links.(refer: Github: filterjs.js in example ‘filter_callbacks’)
– You can add markers before returning the view(refer: filterjs_map.js view function)
– For searching data you have to implement own search component.
Jiren, could you send me a quote to add a textfield option to filter.js? I suggest this one: http://cheeaun.github.com/jquery.livefilter/ or http://anthonybush.com/projects/jquery_fast_live_filter/demo/
the code would stay part of the open sourced project and can be used by others, with no license change
I have now used my companies e-mail address in the contact info of this comment (I’ll be on vacation the coming two weeks, but will respond afterwards)
for the pagination, if others want it:
use the above link to smFilteredPagination and change the hideshow function in filter.js to:
hideShow: function (id_arr) {
var id_str = “#” + this.settings.root + ‘_’;
$(this.parentNode + ” > *[data-fjs]”).addClass(“filtered”);
id_arr.forEach(function (id) {
$(id_str + id).removeClass(“filtered”);
});
},
add
.filtered{
display:none;
}
to your css
$(function(){ // document ready
pagination = new $.smFilteredPagination($(“#projects”), {
});
});
to your own page
and add
pagination: function(){
pagination.rebuild()
}
to the filter.js callback function
This is exactly what I’ve been looking for – great work.
How would I go about setting the initial state at inclusion for all items and then individual filter selections refine the data set presented?
You have to write json web service or include json data in your html page to include items and you can just follow the instruction given on github or this blog to add configuration.
Hi. I will use the nonprofits from your site. Where can i find a download link with code from the nonprofits ?!
thanks
You can clone fitler.js github repo, you can find code in example folder in repo.
Thank you for this project and writeup. I’m an advanced beginner here, and have been able to work through your examples, but am getting stuck when trying to apply to my project.
I’m running into issues when I try to use the following json: http://pastebin.com/FT8pQhJd
If I put each into an anonymous “object” fire it is seems to work.
Is it must to have each object housed in an anonymous object?
Something like: “fires”: [{“fire”: {“id”: 1, “type”:”house”, “damage”:”none”}}]
Yes, every object must have root name. like you have mention ‘fire’.
Hello Jiren or anyone who’s willing to help. The script is amazing, I’m having some trouble in filtering the data. I have used only checkboxes still errors are popping up. it’s just a small mistake which I’m unable to find. The problem might be in settings tab maybe. Please look at the code n help me out.
The main html file –> http://pastebin.com/zXbvaURJ
The filterjs.js file –> http://pastebin.com/7pFEaEf8
You don’t have a searchbox but you are calling it. Try removing the line in the filter js file
Thanks Daniel. The issue is resolved.
How do i add a button to each object for example (Add to Cart)
Thanks
Joe
Can you explain more about where you want to add to cart button, in each item or filter side.
For each object you have to add html of add to cart in item template.
jiren, thanks for your quick response..here is a link below
http://arlingtonnewsnetwork.com/test/sorte/products.cfm?CatID=4&catName=CAN%20LINERS
I am trying to add an (Add to cart) button with a quantity text box under each item..)..
thanks for providing a great sample//
services.js : In view function add elements for text box and button.
You are using old filter.js. you can get newest version from github and integrate view template like jquery template, this will make your template design task easy.
Jiren, I tried you filter example, it works fine on Firefox, but it doesn’t work on Internet Explorer. it produces an error on filter.js line 303 .(object doesnt support this property or method)..
Am i missing anything?
Thanks
Use latest version of filter.js. You have used older version, in older version you can face IE issues.
Also can you send me error so I can look into this.
Jiren, I downloaded the new version of the filter and it works fine in Firefox, when i loaded from Internet Explorer it comes up just fine, but once i started check the categories boxes or prices or the slider or type in anything in the Search Box.. It produces an error and none of the products gets filtered (the filtering items is producing an error)..below is the link that i am using
http://arlingtonnewsnetwork.com/test/filter12/examples/filterjs.html
That’s the error i am getting on Internet Explorer when I try to filter the items.
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C)
Timestamp: Fri, 19 Oct 2012 16:15:23 UTC
Message: Object doesn’t support this property or method
Line: 303
Char: 11
Code: 0
URI: http://arlingtonnewsnetwork.com/test/filter12/filter.js
Your old filter.js works on both Firefox and internet explorer
http://arlingtonnewsnetwork.com/test/sorte/products1.cfm?CatID=4&catName=CAN LINERS
Ann, I have fix the issue and push to github. Can you checkout new code from the github and check.
Hi, We have option to add checkboxes, sliders etc. I wish to add combobox too. Can u tell me how to do it?
2. I also wish to add a calender so that when the user clicks on that date all the items of that date are shown.
A small push and rest I’ll manage myself. Just show the right direction,
For combobox add same filter criteria with change event like other elements.
For calendar set onselect event and call filtering manually or set hidden field and trigger change event like slider.
Jiren, I downloaded the new version of the filter.js and it worked fine on Internet explorer, the only issue i have seen is the slider doesn’t slide correctly..and it still producing an error when you do search and filtering. thanks for fixing the error..
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; InfoPath.2; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C)
Timestamp: Mon, 22 Oct 2012 18:52:39 UTC
Message: ‘console’ is undefined
Line: 125
Char: 9
Code: 0
URI: http://arlingtonnewsnetwork.com/test/filterOrig/examples/filterjs.js
“console.log” is not supported in IE. This error is coming from callback. Remove the “logger” callback from the “filter_callbacks”. In example I have write callback for just showing how to implement callback after filter.
Thank you for the plugin.
I am trying to integrate this and here is my problem.
I would like to filter based on the link clicked, for example if I am clicking on a link (Age :30-40) it should apply filter for Age – I got this part working till here.
I have another link (country : NL) when I click this I would like to show the results with Age: 30-40 and Country : NL
I can only get one filter to be applied through link. Please help me on implementing this.
I am using the code form here http://www.plenaforma.nl/webtest/filter_JS/
and modified it to the code here http://pastebin.com/JcPkuLXw
Jiren,
having problems in IE8 also so I used your updated script.
I found a problem with your execCallBacks function, v returned null (don’t know why) so I changed it to:
execCallBacks: function (result) {
var base = this;
if (!base.settings.callbacks) return;
filtered_objects = [];
$.each(base.dataModel, function (i, v) {
if (v != null) {
if (result.indexOf(v[base.settings.root].id) != -1) {
filtered_objects.push(v[base.settings.root]);
}
}
});
and the filtering works again
It seems I haven’t broken any functionality, so perhaps this can help you.
cheers,
Daniël
Thanks Daniël, I have updated the code for this error.
Hey Jiren,
I have updated to latest code but it seems now when I have both regular filtering via radios and checkboxes enabled AND filtering via search field… only the searchfield works and regular breaks. Then if i remove the search box filtering the normal ones work. This is only in IE8.
actually the more testing, it seems like there just NEEDS to be a value inside of the search field for both methods to work. Even if its just an empty space/character. If there is absolutely no value in search field then the radio/checkbox filters dont work.
Ara, If you getting error then send me error or send your filtering url so i can look into this.
Hi Jiren,
Thanks for the plugin.
I’m probably missing something here – http://thisislove.pt/clientes/test/pesquisa.html – using the checkbox always returns only the first item. Can you please take a look?
thanks,
Maria
You have to set “id” field in every object of ‘sala_detail’ in json data.
i.e
sala_detail :{id: 1, name:Salão Macau – Plateia ,category:Plateia ,category_id:1 ,pax:180 ,area:203 ,url:salaomacau-plateia.php}}
Great article, kudos!
I’ve a question…
Can I use this with WordPress?
I hope you’ll help me.
Thanks a lot.
Yes you can use with wordpress, just you have to give input with mention format on github(github.com/jiren/filter.js/).
Hello Jiren, can you please help me integrate this to wordpress? I can play with the code, but I’d rather have you guys do it 🙂 Please contact me with a quote at: amine7@gmail.com
This is awesome.I’ve spent endless hours trying to get this to work, specifically with sliders. Can you update the main example on this page in full html structure? The demos are great, but they’re a little too complicated for a noob. Thanks!
You can checkout this example http://www.plenaforma.nl/webtest/filter_JS/
Thanks this is what I was looking for. I think the problem I was running into above was beceause believe there is a comma missing after the price criteria in the var settings. Not sure if thats what it was, but seems to be working now. Thanks a lot, I will definitely point people toward this blog!
Wondering if this is possible..
service.start_date and service.end_date, than a filter link with data-value=today’s date, when you click it and shows all records that are past service.start_date and before service.end_date ?
Thanks! Great plugin by the way.
Yes you can do this, get start date value in milliseconds i.e start_date.getTime()
Set this data-value= start_date.getTime() + ‘-‘ + end_date.getTime(). When you apply filter this work as normal integer range filter.
Thanks for the reply Jiren, I already have the start and end date in milliseconds but I need it to work the opposite kind of.
Event starts 135000000 and ends 145000000, I need to click a button that has 14000000 and show any event that starts before and ends after that time stamp.
So date-value=”below-14000000-above”
Is that possible?
Something like…
link_filter: [‘#link_filter .EVENT.change .SELECT.:input .TYPE.between’, ‘end_date-start_date’]
Sorry for multiple messages, but I solved this by adding some filters to your filter.js code and posting on github, maybe it will help someone else or it could be added to the code?
https://github.com/jiren/filter.js/issues/6
Thanks for the great plugin! Is it possible to restrict the search box field to certain blocks of text? Going by the included example: suppose you wanted to include only text in div.fs_head from searching typed into the input #search_box.
For this you have to set search config like
search: {input: ‘#searchbox’, field_selector: ‘div.fs_head’ }
if you want multiple fields you set as comma separated.
field_selector: ‘div.fs_head, div.fs_price’
Too easy! Thanks!
I’m assuming the ‘field_selector’ was used in a previous versions. on the latest version you should use ‘search_in’ instead. you’ll also have to fix the misspelled word w/in filter.js
I’ve forked the project on Github and added my small contribution: ‘min_length’
https://github.com/rlamtabbet/filter.js
I wanted to suggest a modification to the code. I use the suggestion by Daniël Tulp for adding pagination and it works great. His solution requires altering hideShow function in filter.js. You can change this function to allow a user to have a setting for using a class to hide items instead of the jQuery hide function. Here is the modified function:
hideShow: function(id_arr) {
var base = this;
var filtered_item_class = base.settings.filtered_item_class;
var id_str = “#” + this.settings.root + ‘_’;
if ( filtered_item_class ) {
$(this.parentNode + ” > *[data-fjs]”).addClass(filtered_item_class);
}
else {
$(this.parentNode + ” > *[data-fjs]”).hide();
}
id_arr.forEach(function(id) {
if ( filtered_item_class ) {
$(id_str + id).removeClass(filtered_item_class);
} else {
$(id_str + id).show();
}
});
},
Then in the settings the user can just add this to use a class for hiding items:
filtered_item_class: ‘filtered’
can you help me with the pagination for this plugin …am not getting it
We’ll need more then that. I and @lukemcd explained already how to do it
please specify what you are doing (code or better a webpage will help), what you are trying to do and what goes wrong (error messages?)
Thankx for this plugin.iam tried this but sorting and pagination both are not working at a time.can you tell me how to write this?
After adding pagination elements is filtered and pagination are not updated.
Can you send me code with html(just save from the browser) so I can help you.
Thanx for the reply but its not allowing that much of code.here iam calling the pagination file like this
$(function(){
pagination = new $.smFilteredPagination($(“#displayproduct”));
});
Hi
its some what urgent for me can you help me plss
in script for pagination
$(function(){
pagination = new $.smFilteredPagination($(“#displayproduct”));
});
in html
can u tell me any other plugin is there for pagination
hi jiren i read your article but not understand too much because i am new in .net development,i use grid view which is bind to database table and use j query slider and want to do functionality which is discuss in this article but not getting how to do all this i want to this page http://www.taxiforsure.com/intracity/results/bangalore/adugodi/32093/ but how to do this please send me any complete appliction my id nileshkelhe@gmail.com
Check out the demos, and if you download the code there are 3 complete applications already available for you to implement any way you’d like. Also, this one helped me figure it out. It uses mustache js however, but it’s pretty easy to figure out.
http://www.plenaforma.nl/webtest/filter_JS/
Not as though you haven’t already done enough for us all Jiren , but I agree, it would be great if you could put a more simple version in the download or if someone else could. Like the completed example of the tutorial on this page. I still haven’t been able to get that one to work. I may be wrong but in var setting I believe there is a comma missing after this line…..
price: [‘#price_filter .EVENT.change .SELECT.:input .TYPE.range’, ‘timeleft’]
HI, Can u tell me how to load Json file step by step on scroll like yebhi,snapdeal etc,instead of loading complete json file
HI Jiren! tis really an awesome work. I am keen to implement on my wordpress blog. It is a gadget site and i want a phone filter page. Could you plz explain how to integrate this into wordpress step by step as i am not a coder at all. Plz contact me at my mail id endlessdesirezs@gmail.com
Hello,
This looks awesome, I am trying to setup a content filtering system. and I am using expression engine as CMS. I wonder if the content needs to be hardcoded to the tags in the header (meaning the products) or is there a way to render this straightly through html and use filter.js to simple do the “filtering” part of the process. I say this because it might get tricky to get the content variables in expression engine to output products straightly to the header tag. It will be easier to control if content was already in the html to start of.
Any ways this is a really awesome script, great work guys.
I ll appreciate any help on what I ‘ve mentioned.
Cheers
-Manuel
If you do not want to render html element then you have to comment out ‘this.render();’ in _filterJS function. And one more thing you have to add ‘id’ attr to html element id i.e ‘item_1’ if your json data has root name ‘item’ and 1 is id of your record in json data and also add another attribute like ‘data-fjs’: true to html element.
You can refer render function in js file.This will give the idea.
Hello Jiren,
Thats very kind of your part, to be honest I am having a bit of trouble getting that working out, would you mind doing a minimal example (js/html) to show more precisely what you mean, I ll really appreciate that.
Thanks.
Manuel,
Can you send me your html saved using browser, so I can look into that and suggest solution.
Hello Jiren,
thanks for the reply, I do apologize for the delay. I’ve been tinkering around at different ways to make this work, and ultimately thought of using timeline.js with filter.js to filter entries.
Timeline.js (http://timeline.verite.co/) uses json data to populate events, and I will like to filter the entries based on the data provided. Although I am not really sure how to get this working fine. I ve seen that filter.js uses javascript vars, and timeline.js uses json data. I am wondering if there is a way to make filter.js to work with pure json data?
this is a sample code I have in timeline.js
{
“timeline”: {
“headline”: “test”,
“type”: “default”,
“text”: “test”,
“startDate”: “2009,11”,
“date”: [
{
“startDate”: “2013,3”,
“headline”: “test”,
“tag”: “test”,
“text”: “”,
“asset”: {
“media”: “test”,
“credit”: “Manuel”,
“caption”: ”
this is a test!
”
}
},
{
“startDate”: “2012,11”,
“headline”: “test – v002”,
“tag”: “lighting”,
“text”: “”,
“asset”: {
“media”: “test”,
“credit”: “test”,
“caption”: ”
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
”
}
},
{
“startDate”: “2012,10”,
“headline”: “test v003”,
“tag”: “texturing”,
“text”: “”,
“asset”: {
“media”: “test”,
“credit”: “test”,
“caption”: ”
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
”
}
},
I will like to know if that kind of data can be used to popular content for filter.js…
Thanks for your time
and thanks again for this awesome plugin!
Regards
-Manuel
filter.js is using json data but with the root element i.e
[ {city: {id: 1}}, {city: {id: 2}} // city is root of record
So your json data is correct but without root, if you want to use the below mention format then you have to modify filter.js code.
Hello Jiren,
I am mainly curious why the plugin was built to use root. “filter.js is using json data but with the root element i.e [ {city: {id: 1}}, {city: {id: 2}} // city is root of record”
When I goto validate the below json it errors. I love this plugin but always need to convert my json data to work with it, can you point me in the right direction to edit the filter.js so I can use valid json code?
http://jsonlint.com/ – json validator
var people = [{person: {name: ‘Jiren’, age:26, country: ‘India’, country_id: 1,
states : [{ state : ‘MH’, state_id : 3 },
{state : ‘HN’, state_id : 4}] } },
{person: {name: ‘Joe’, age:25, country: ‘USA’, country_id: 2,
states : [{ state : ‘MH’, state_id : 3 },
{state : ‘HN’, state_id : 4}] } }
]
Thanks!!!
Hi Jacob
I am going to change the code for working with both with root and without root.
If you want to change you have to remove all “settings.root” statements and in “render” function you have to generate uniquely identify id. Currently it is generating using root
i.e ‘person_1’, ‘person_2’ //here “person” is root.
I have used root because in rails(active model) json serialization it used root by default now rails 3 supports json data with and without root.
Hello Jiren,
Thanks for the update. Good to know there is a way to make it work! I’ll await to see your modified version of filter.js to use with/without root element. Thanks for doing this!
I m really looking forward!
Regards,
-Manuel
Ps: I answer after this post because, I didnt see the “reply” available on your last post.
Hey can anyone explain how the AND/OR filtering works? After looking at this, it doesn’t really make sense to me… With AND filtering shouldn’t the results show ONLY items that have BOTH or ALL of the attributes selected. So for example, if I click “Family” AND “Food and Drinks”, I would think that the ONLY results that would return are those that have BOTH family AND food and drinks attributes.
Also, this is probably a bad question, but when using multiple range inputs when are you suppose to use $(‘#foo_filter’).trigger(‘change’); and when to use fJS.filter();? The example with the range filters is pretty complex and it’s hard to differentiate what you’re suppose to use (at least for a non-JS pro).
Thanks!
AND filter is not working right now, I am going to fix this.
For your second question.
i.e filter criteria for range is
[‘#price_filter .EVENT.change .SELECT.:input .TYPE.range’, ‘amount’]
Filter.js bind change event on #price_filter for filtering, this will internally fire fJS.filter() on change event , if you want to fire filter manually you can use fJS.filter(). Here fJS is filter.js object.
I am using ASP.NET JSON to generate the object from an SQL source. The resulting object does not contain a top-level entity.
var products = [
{“ProdID”:1,”ProdName”:”Test1″,”Accent”:”Hammered”,”Finish”:”Gold”,”Length”:6.45},
{“ProdID”:2,”ProdName”:”Test2″,”Accent”:”Hammered”,”Finish”:”silver”,”Length”:6.25},
{“ProdID”:3,”ProdName”:”Test3″,”Accent”:”Bead”,”Finish”:”Gold”,”Length”:5.25}
]
How can I write the “view” statement to select a single pair of values? Using “ProdID.Accent” does not work.
If it is possible to change the data source, And How to Change the Data Source??
Hi ..!! Jiren….!!
i want to make it dynamic…but i dnt knw how to do..plz help me..coz my project is on deadline..
i want to load products on pageload..
{“ProdID”:1,”ProdName”:”Test1″,”Accent”:”Hammered”,”Finish”:”Gold”,”Length”:6.45}
if i write above thing in function than script is not working..plz help….
waiting for your reply…
Great tool!! It’s also cool you share this great tool here 🙂
I’ve 2 questions. (sorry I’m a java noob)
In the example on github 1) Is it possible to give a product (or place) more then one category?
I tried to change this in the json part
“service_categories”:[{“to_param”:”2″,”category_id”:27}],
and added another category, but jsfilter select only one.
“service_categories”:[{“to_param”:”2″,”category_id”:27,”category_id”:28}],
2) the results are shown in 3 columns now. Is it possible to make this two or one column?
If you want to multiple values you have to make it array
i.e “service_categories”:[{“to_param”:”2″,”category_id”: [27,28]}],
Thank you for you fast response 🙂
Reblogged this on rg443blog and commented:
filter.js – Client side search filtering using JSON and jQuery
I actually have the same question as @khushal
I am trying to edit the code so I don’t need a sub-object, any idea how to work this out?
Removing the “person” field.
var people = [{id: 1, name: ‘Jiren’, age:26, country: ‘India’, country_id: 1,
states : [{ state : ‘MH’, state_id : 3 }, {state : ‘HN’, state_id : 4}] },
{id: 2, name: ‘Joe’, age:25, country: ‘USA’, country_id: 2,
states : [{ state : ‘MH’, state_id : 3 }, {state : ‘HN’, state_id : 4}] }
]
Hai jiren,
Firstly thank you for creating simple and powerful filter plugin. And I am having doubt in filter option. My issue is, when I loading page with multiple check-boxes unchecked it has to show datas only checked write? I achieved unchecked through my database status. Can we achieve this condition while is page is loading?? I am using mustache template rendering
Please reply asap
Thanks in advance,
I din’t get it. Your want to show all the datas on page load or wan’t to show filtered data according to checkbox selection?
Thank you for reply,
I want to show filtered data according to checkbox’s selections on page load
my code is,
var fJS;
jQuery(document).ready(function($) {
fJS = filterInit();
});
function filterInit(){
//Mustache
var mustache_template = $(“#mustache_template”).html();
var mustacheView = function(service){
service.short_title = service.title.length < 15 ? service.title : service.title.substring(0,15);
return Mustache.to_html(mustache_template, service);
};
var filter_callbacks = {
logger: function(result){
console.log(result);
}
};
var settings = {
filter_criteria: {
level: ['#level_list input:checkbox .EVENT.click .SELECT.:checked', 'level.level_categories.ARRAY.level'],
amount: ['#price_list input:checkbox .EVENT.click .SELECT.:checked .TYPE.range', 'amount.amount_categories.ARRAY.amount']
},
and_filter_on: true, //If any filter selection is zero then select none. For 'OR' filter set 'false'
callbacks: filter_callbacks, //Filter callback execute in filter init and each filtering event.
};
return FilterJS(services, "#leagues", mustacheView, settings);
}
After calling ‘filterInit()’ call filter manually using ‘fJS.filter()’.
i.e
fJS = filterInit();
fJS.filter();
Thanks jiren,
It works 🙂 ❤
It’s a shame you don’t have a donate button! I’d without a doubt donate to this outstanding blog! I suppose for now i’ll settle
for book-marking and adding your RSS feed to my Google account.
I look forward to fresh updates and will talk about this blog with my Facebook group.
Talk soon!
Haha! Jiren, hate to say this but “I told you so.” This work should have a Donate button!
HI JIREN.
First of all a great a piece of work from you. i have some roadblocks while using this. can you help me regarding that
1)i have 5 filters and all are checkboxes.
2) my json objects are very large. it contains more than 50 attributes. so i am using another json for each json called “criteria_json” which will have only these 5 values to be filtered for each json object . so i am going to filter based on my criteria file.
3) once the filtering is done you are directly rendering the json data to the html page. instead of that i need the list of json objects which are filtered. in my case i am doing filtering based on criteria file. so if i use your filter directly criteria_json will be directly rendered in the html page.
4) but i need to show the orginal json data in the page.
5) please help me in getting the json data instead of rendering directly in the html page
You can use only required fields to filter and display in json, otherwise you have to implement in view. In this function you have to find out related json object on other json and render that json.
ok i understand that jiren. thanks for the repley.
can you please tell me with small example how to get the filtered json data.
How can i write a pagination in filter.js.i have 256 products in a page i want to display a pagination.can any body explain me how to write a pagination.
can anybody tell me how to write a pagination
You can use filter callbacks(refer document on gihub), this will execute after filtering. In this you can implement pagination using plugin like http://www.dev4.us/jquery-plugins/smFilteredPagination/#2
i added that plugin but its not working.can you tell me where i have to write that funcion
i added that smFilteredPagination.Pagination is working correctly and products also filtered but sorting is not working.can you tell how to write both.
Example: there are 100 products it splits in to 10 pages at that time its working correctly after filtering only 1 product will come at that time that 1 product will be stored in 10th page.remaining all the pages are empty this is my problem.can you tell me how to rectify this?
Thanx for the reply but its not allowing that much of code.here iam calling the pagination file like this
$(function(){
pagination = new $.smFilteredPagination($(“#displayproduct”));
});
Hi Jiren. I have a case where I want to use filter.js in multiple instances on a single page. The issue I run into is the script is hiding all the results in every instance after the first one. Do you have recommendations for running multiple instances of filter.js?
For each filter instance use different html container name, it’s batter use id then class
i.e
fjs1 = FilterJS(services, “#service_list_1”, view, options);
fjs2 = FilterJS(services, “#service_list_2”, view, options);
Or multiple instance not working because of something else then send me detail how you are using.(some code snippet)
Thanks Jiren, that’s great.
FYI, I have an implementation of filter.js combined with jQRangeSlider and it’s looking pretty sweet!
Today I simplified your amazing example.
Unfortunately it a little bit did not work perfectly in my case, and I cannot understand why.
If I typing in search field the search result is empty, but after touching the price slider, this search field works correctly.
file.html:
http://www.everfall.com/paste/id.php?twson9yvd00z
file.js:
http://www.everfall.com/paste/id.php?1l4ndlmvbjmx
Thanks in advance,
WBR, Ivan
Before filter init you have to set the value for price filter which is hidden field. When slider change the price it will update the hidden field value.
i.e $(‘#price_filter’).val(‘0-500’); //before filter init.
FYI.
slide: function(event, ui) {
$(“#price_range_label”).html(‘$’ + ui.values[ 0 ] + ‘ – $’ + ui.values[ 1 ] );
$(‘#price_filter’).val(ui.values[0] + ‘-‘ + ui.values[1]).trigger(‘change’); // Hidden field value change.
}
Thank you Jiren, that’s works!)
if (property_count == 1){
this.getRecord = function(i, d){ return d[this.root][i]; }
Uncaught TypeError: Cannot read property ‘0’ of undefined
}else{
this.getRecord = function(i, d){ return d[i]; }
this.root = ‘fjs’;
}
Hi Guys,
I am trying to get your script working but I am getting this error in filter.js, Can you point where is my mistake?
here is my JSON format:
http://pastebin.com/WSXuWV6B
and here is the .js – http://pastebin.com/azxFrYn8
Any directions?
Thanks,
Mario
There is a bug in the filter.js getRecord function. Now it is fixed. You can get latest code from http://github.com/jiren/filter.js
Hi guys,
I have a problem with search: {input: ‘#searchbox’ },
Whenever i type in the input field it gives me an error:
Uncaught TypeError: Cannot read property ‘length’ of undefined filter.js:246
This is liine 246 ->
var e_id = ‘#’ + this.root + ‘_’, i = 0, l = ids.length;
Can you send me code snippet of your js code, so I can check.
http://pastebin.com/rPKmjxg2
here is the code, thanks for the help.
In your code filter criteria(in options) is compulsory.
i.e
filter_criteria: {
category: [‘#category_list input:checkbox’, ‘service_categories.ARRAY.category_id’]
}
Filter Criteria
i.e
var settings = {
filter_criteria: {
category: [‘#category_list input:checkbox’, ‘service_categories.ARRAY.category_id’] //Sample
},
search: {input: ‘#searchbox’ },
and_filter_on: false,
};
I added filter criteria but not sure i did it correctly because i get the error :
uncaught TypeError: Cannot read property ‘tagName’ of undefined
This is the edited js:
http://pastebin.com/MSk45cYy
This is the html:
http://pastebin.com/gabjjq21
Thank you.
Hello,
When searching in the input text field , i get the correct number of results with filter callbacks but only if the number of results is 1 the with result is displayed. If there are more than one results nothing is displayed except the number of results.
Thanks for your help.
I am trying to generate the JSON array dynamically using php:
$row[‘ItemName’], ‘id’ => $row[‘ItemID’],’title’ => $row[‘ItemName’], ‘amount’ => $row[‘ItemPrice’]);
}
echo json_encode(array(‘services’=>$services));
?>
The output does not seem to be in the correct format, what am i doing wrong? Is this the correct way to get the JSON dynamically?
$row[‘ItemName’], ‘id’ => $row[‘ItemID’],’title’ => $row[‘ItemName’], ‘amount’ => $row[‘ItemPrice’]);
}
echo json_encode(array(‘services’=>$services));
?>
Hi jren!
Thank you for this fantasic script!
I’m right now using it for a developing project. I have a question though…
Lets say you want to filter objects based of an array of dates contains in the objects available dates
INPUT (FILTER CRITERIA)
Date from: 2013-10-19
Date to: 2013-10-21
//Dates between array calculated: [2013-10-19, 2013-10-20]
Check this array if all the dates is find in the objects available dates. If it does show object
JSON DATA
var services =
[{“service”:{“id”:1,
“avaiable_dates”:[2013-10-2, 2013-10-3, 2013-10-4]
}},
{“service”:{“id”:2,
“avaiable_dates”:[2013-10-24, 2013-10-25, 2013-10-26]
}},
{“service”:{“id”:1,
“avaiable_dates”:[2013-10-18, 2013-10-19, 2013-10-20]
}
}]
RESULTS
id: 1 = false (hide)
id: 2 = false (hide)
id: 3 = true (show)
Do you know a good way for filter.js to handle this?
Best regards
Mathias
You can add custom fitter type for date.Refer this like for add custom filter type. https://github.com/jiren/filter.js#custom-filter-types.
In filter type function you have to build date like new Date(‘2013-10-18’) and then you can compare with dates.
Thank you jiren for you helpful tips
I will try to figure it out 🙂
hi Jiren, i have a problems to access element jsonData,
to element array [itinerary] =>linkWebVoHRef or [itinerary] =>linkWebVoValue
{
“priceSinceInResults”: “5.030 20ac”,
“cruiseTitle”: “Leyendas del Mediterráneo 2013”,
“tourImageLink”: {
“imgSrc”: “/media/images/excursionesPeq.jpg”,
“aHref”: “/cruceros/mediterraneo/leyendas-del-mediterraneo/valencia/itinerario-2013.html”,
“aTitle”: “Excursiones Leyendas del Mediterráneo”
},
“itinerary”: [
{
“linkWebVoHRef”: “/destinos/espana/valencia.html”,
“linkWebVoValue”: “Valencia”
},
{
“linkWebVoHRef”: “/destinos/espana/malaga.html”,
“linkWebVoValue”: “Málaga”
},
{
“linkWebVoHRef”: “/destinos/italia/cagliari.html”,
“linkWebVoValue”: “Cagliari”
},
{
“linkWebVoHRef”: “/destinos/italia/civitavecchia-y-roma.html”,
“linkWebVoValue”: “Roma (Civitavecchia)”
},
{
“linkWebVoHRef”: “/destinos/francia/ajaccio.html”,
“linkWebVoValue”: “Ajaccio”
},
{
“linkWebVoHRef”: “/destinos/espana/palma-de-mallorca.html”,
“linkWebVoValue”: “Palma de Mallorca”
},
{
“linkWebVoHRef”: “/destinos/espana/valencia.html”,
“linkWebVoValue”: “Valencia”
}
],
“shipImageLink”: {
“aHref”: “/barco/empress/camarotes.html”
},
“yearItinerary”: [
{
“value”: [
{
“departures”: [
“28”
],
“textValue”: “septiembre”
},
{
“departures”: [
“05”,
“12”,
“19”
],
“textValue”: “octubre”
},
{
“departures”: [
“02”,
“09”
],
“textValue”: “noviembre”
}
],
“key”: 2013
}
],
“shipCode”: “EP”,
“cruiseLength”: “7”
},
thanks!!
Short question 🙂
Is it possible to run multiple text search inputs?
searchbox1 [____________________]
searchbox2 [____________________]
searchbox3 [____________________]
filterjs_map.js
var settings = {
search: {input1: ‘#searchbox1’,
input2: ‘#searchbox2’,
input3: ‘#searchbox3’
}
This will make it possible to search mutliple words in an object..
If the description somewhere contains “word1”, “word2” and “word3”.
For this you have to customise ‘bindEvents’ and ‘search’ function. In bindEvents function you have to iterate search input and bind keyup event or you can provide same css class to all search input and bind event without iterating. While in search function you have to iterate for each searchbox and get the value and give search result for the next iteration.
Filter.js is not searching in json data but it will search rendered html.
Thank you very much Jiren!
It works like charm! 🙂
Jiren,
I have a problem with http://www.gprprojecten.nl. Perhaps you could take a look at my question at stackexchange: http://stackoverflow.com/questions/17068828/cluster-google-map-pins-when-using-an-object-of-markers-instead-of-an-array
basically the problem is with the pins overlapping, a solution would be to use clusters, but I cannot get it to work
Jiren – can you post examples using drop downs? I’m trying to use the solution proposed by Stan Slaughter and BDg. I’ve got it working when I choose individual values. I’m stuck when I try to modify the filter.js file so that selecting “all” removes that category of filtering. In their comments:
base.settings.selector.forEach(function (s) {
if ($(s.element).filter(s.select).val() != “all”) {
but “base.settings.selector…” doesn’t exist in the current filter.js file. How do I modify the filter.js file to accomplish this?
In github stream example have selectbox. Also in that example code for selecting all. For this you have to ignore all value input and do manually call filtering.
How can I add a thumbnail image to each filterable item? I’m not entirely sure.
Hi Jiren, thanks for this great bit of coding. One question, the example file stream.html is pulling the data from top_movies_data.js, and I can’t get it to pull from top_movies_data.json. In fact, if I remove the reference to the js file (<script src="top_movies_data.js"), the json file won't load at all. What am I missing? I want to reference a json doc to supply the data. Thanks in advance, -Chris
In example I have used for initial data load. You have to give your json file path. In my example it is in data folder.
Turns out I just had to add “var Movies = ” before the opening [ of the data in top_movies_data.json! Anyway, thanks for your quick response. I’ll send you a link to the site I’m building when it’s done, it’s a product finder that would have been impossible to build (for me anyway) without filter.js
i selling a solution for pagination results from filter if anyone interested mail me at : dadilev@gmail.com
Hi All, i used this library and found it awesome thanks for sharing. However, i have a case when my Json is an array of objects it doesn’t works. Any pointer will be helpful. Below is the sample of JSON i get.
var _data = [object, object, object, object] on expanding tree in console window it shows
0: Object
builder: “A”
idsite_data: 2
image_name: “A.jpg”
price: 12953
size: 1582
unit: “Unit 1”
1: Object
builder: “B”
idsite_data: 3
image_name: “A.jpg”
price: 12953
size: 1582
unit: “Unit 1”
my filter criteria is :
builder: [‘#builder_list input:checkbox .EVENT.click .SELECT.:checked’, ‘builder’]
//Call to filter
FilterJS(_data, “#projectsData”, view, settings);
Thanks in Advance!!
Can you send me browser error so I can check or you can send me saved html from browser with javascript.
Thanks for reply, there are no errors in browser. filter call backs shows a blank array.
Hi, your script is great.
I need your help. I try to use it with mysql database. I have a table with the following fileds. Id, title, price. With this table it WORKS EXCELLENT. But when I change the name of the primary key (ID to villa_id), it doesn’t work. I can’t find the code to change it.
I’m using the example SIMPLE_FILTER.html (filter.js, simple_filter.js)
Thanks.
I have added option for ‘id_field’. Check of my github repo, also I have updated simple_filter example for this kind of use case.
Thank you very much Jiren for your help. This script is amazing.
Hi again,
I would also like to ask how can I add the “count results” in SIMPLE_FILTER.html. So user can know how many records he will see. (at stream.html you call “total_movies”)
Thanks for your time!!!!
There are callbacks like after_filter, after_add so you can update result count using callbacks. Ref: https://github.com/jiren/filter.js#filtering-callbacks
function filterInit() {
var template = Mustache.compile($.trim($(“#template”).html()));
var filter_callbacks = {
after_init: function(record_ids){
//Call after init of filter.
},
after_filter: function(result){
$(‘#total_movies’).text(result.length);
},
before_add: function(data){
//Process data before adding to filter while streaming.
},
after_add: function(data){
//Call after adding data to filter.
},
};
var view = function(service){
return template(service);
};
var settings = {
filter_criteria: {
price: [‘#price_filter .TYPE.range’, ‘start_price’],
stars: [‘#rating_filter .TYPE.range’, ‘persons’],
pool: [‘#pool :checkbox’, ‘pool’],
beach: [‘#beach :checkbox’, ‘beach’]
},
//search: {input: ‘#search_box’ },
//and_filter_on: true,
};
return FilterJS(services, “#service_list”, view, settings);
}
This is the code at simple_filter.js. I also add the following code at simple_filter.html.
(250)
But nothing happens. I don’t use the proggress-bar. Is that problem?
Thanks
Jiren is correct, below is the exact code you need to place to print count.
var filter_callbacks = {
after_filter: function(result){
$(‘#result_count’).text(‘Found : ‘ + result.length);
}
};
Jiren is correct, below is the exact code you need to place to print count.
var filter_callbacks = {
after_filter: function(result){
$(‘#result_count’).text(‘Found : ‘ + result.length);
}
};
Thanks Deepak Kushwaha, but it doesn’t work. I use the simple_filter.html + simple_filter.js. I test it to the prototype example, but nothing.
////////////////////////SIMPLE_FILTER.JS///////////////////////////
var fJS;
jQuery(document).ready(function($) {
$(‘#price_filter’).val(‘0-500’);
$(“#price_slider”).slider({
range:true,
min: 0,
max: 500,
values:[0, 500],
step: 5,
slide: function(event, ui) {
$(“#price_range_label”).html(‘$’ + ui.values[ 0 ] + ‘ – $’ + ui.values[ 1 ] );
$(‘#price_filter’).val(ui.values[0] + ‘-‘ + ui.values[1]).trigger(‘change’);
}
});
$(‘#status :checkbox’).prop(‘checked’, true);
fJS = filterInit();
});
function filterInit() {
var template = Mustache.compile($.trim($(“#template”).html()));
var view = function(service){
return template(service);
};
var filter_callbacks = {
after_filter: function(result){
$(‘#result_count’).text(‘Found : ‘ + result.length);
}
};
var settings = {
filter_criteria: {
amount: [‘#price_filter .TYPE.range’, ‘amount’],
status: [‘#status :checkbox’, ‘status’]
},
search: {input: ‘#search_box’ },
and_filter_on: true,
};
return FilterJS(services, “#service_list”, view, settings);
}
//////////////SIMPLE_FILTER.HTML/////////////////
Search
(span id=”result_count”> 2 span>)
Hi Jim,
I can see that you have not called callback function anywhere in settings use below snippet where i have added “callbacks: filter_callbacks”:
var settings = {
filter_criteria: {
amount: [‘#price_filter .TYPE.range’, ‘amount’],
status: [‘#status :checkbox’, ‘status’]
},
search: {input: ‘#search_box’ },
and_filter_on: true,
callbacks: filter_callbacks
};
//Hope it works for you.
Thank you very much Deepak. It works perfect.
I like the valuable info you provide on your articles.
I will bookmark your weblog and check again here frequently.
I’m quite certain I will learn many new stuff proper right
here! Good luck for the next!
Hi,
We need your solution if possible. We are using Filter.js in one of our application. In our application, there is profile page. The profile page must have reviews, profile default image and etc. The problem is we send the data thru json encoding and we are unable to get all the data. When using For each, we are not getting all the values.
Eg:
We can get the user name but we are unable to get the user id of it. Can you please give his some hints how to get the user id.
hi Jiren,
Can this plugin be used with Backbone views….
As I have a use case where we are using backbone view render our search results.
I haven’t try with backbone, but you can define view function in that you can render view using backbone and return it.
I’m having a hard time trying to load an external JSON file without directly adding it as a file in the HTML(but using jQuery $.getJSON). Can you please help? I’m using the stream.html example.
Thank you.
No need to user $.getJSON to get data, you can just define “data_url” in filter.js options. filter.js wil fetch data and render it.
Thank you for getting back to me so quickly. I appreciate your help.
I can see that working for one page, but I’m using this same code to set up filtering for 3 other pages with 3 different JSON feeds. Is there an more code efficient way of doing this?
Hi!
This is what I was looking for! It´s a great tool. But I have a “problem”: I need to use it in tablets.
I´m testing it on an iPad and the range slider is not working very well. I cannot “slide it”. I have to tap on it in order to active it, and the tap again in order to move it.
Is there a way to fix this? I would like the slider to work like the ones that you can find in query mobile.
First of all thanks a lot for this code.. Filter is working for me but when I am trying pagination its not working.
I tried incorporating changes suggested by Daniel.. if i use that hideShow funtion then filter also stops working. Where I must be going wrong?
Hello Good to user ..
but i have one question is that how can i pass JSON reponse from ajax function in that..
can you please give me some suggestion.
Thank you.
Does anyone know if the code is now working with both with root and without root JSON? If not, can anyone recommend a tool to add a root element into a JSON extract?
Yes, you can actually take “Object” as root element and write your view if you are not getting your json with root element.
Not sure how, could you give me an example please?
Suppose your json is coming as
var people = [{name: ‘Tom’, age:26, country: ‘India’, country_id: 1 },
{name: ‘Harry’, age:26, country: ‘India’, country_id: 1 }]
you can write your view as
var view=function(Object){
detail=”+Object.name+”+”+Object.country+”+ Object.age+”;
return detail;
};
//detail should be according to how you want to display your view.
Hope this helps..
I wanted know if it was possible for me to beable to use your script in wordpress. I wanted use it for filtering wordpress posts
Hi Can anyone please suggest how to include a range filter in filter criteria.I am not getting a single value rather getting a range from backend(ex: $500-600$ for salary range).how do i do client side filtering.
I have been getting this error “ids is undefined ” in filter.js:lineno-280. for unchecking the last filter checkbox.can anyone please suggest
hi.
Thanks for this script.
I try to make a td table with my values.
I used simple_filter.html:
{{name}}
{{month}}
{{year}}
{{number}}
How and where can i add ,, tag, out of script?
ie:
Name
Month
Year
Number
thank you.
sorry, this form don’t allow html tag.. My comment with tag:
http://pastebin.com/3Qa3cNw0
thanks you.
i add the id container in the table, the render work but not the filter.
Hello there, just became aware of your blog through Google, and found
that it’s truly informative. I am gonna watch out for brussels.
I’ll appreciate if you continue this in future. Lots of people will be benefited from your writing.
Cheers!
Hello,
I am using this Js but it is possible in this Javascript to put two search box for different-different value,
Right now this is not possible. For this you have to customise search functionality.
ok… but in this search box filter all value from JSON so it is possible that searchbox working for only choosen value..?
It is searching in html elements not in json. You can set particular html elements using search options
i.e search: {input: ‘#search_box’ , search_in: ‘.price, .desc’},
thank for replay but i still not get my proper result coz actually i want that from searchbox filtering for only name not for all the information if i give me any example like so its grate for me.
Thank You.
i.e in example folder filterjs.js add options for search. Here .fs_head is a “name” element in example.
var options = {
filter_criteria: {
category: [‘#category_list input:checkbox’, ‘service_categories.ARRAY.category_id’],
},
search: {input: ‘#search_box’, search_in: ‘.fs_head’ },
};
Still its not Working For me… i can not undestand that how to pass value in search: {input: ‘#search_box’, search_in: ‘.fs_head’ },
thank you for your hel now its working for me… but i have one problem is that i have radio button for Male and Female on page load i want data where Gender=”male” but after click on Female i can not get any data so is there any solution for that?
Thanks in advance
Can you paste or send html, js snippet.
can i load data for particular Checked Radio button value ….
I did’t get it. Can you give me more detail.
On Wednesday 18 December 2013 12:59 PM, Josh Software – Where Programming is an Art! wrote: > WordPress.com >
I need a dynamically building search with some of its fields are combobox and others are text fields..can you pls tell me how to create its corresponding json for loading the dynamic form in extjs4
Hi
Excellent blog and plugins!
I am using your filter.js plugin on my new site, which is linked below, however it doesnt seem to work on safari… I have a feeling it may be clashing with another script but not sure how to fix it. it works fine on everything else. Any ideas?
cheers
Todd
sorry… realised it didnt include the web url http://toddpadwick.co.uk/client_demos/toddpadwick/
Hi Todd,
First of all you are not using filter.js. If you see the filter.js code there is your custom code to show hide.
It is not working because your event bind before rendering the portfolio items.
Solution for existing js. You have to put your js code of filter.js file in document ready function.
i.e
$(document).ready(function(){
// Write your current code
});
Hi jiren,
Do you have any ideas how to implement dynamic (lazy) creation of result blocks when scrolling down the page and removing them after filtering? See examples bit.ly/1pfkB2g and bit.ly/QjbQVs
Hi,
Is it possible to start with a clear google map and then populate it with the filters?
Thanks.
Yes you can do it in after filter callback. Right now in example after filter callback changes only places markup points so in place of markup points change code you can init google map and mark points .
can you filter by dates?
Yes you can write custom filter type. In example there is time range custom filter same way we can implement date custom filter.
http://www.goodinkind.com/services
http://www.goodinkind.com/nonprofits
These examples links lead to
http://www.goodinkind.com/?f
which just shows an empty template page.
The github example works (and looks nice)
Reblogged this on Play!ng with Scala and commented:
I am planning to integrate it with Play framework.
I want to stop getting updates from this blog because of spam. Please remove my e-mail address.
please also remove this e-mail address
How would you define arrary of states in view function?
Hi!
I can’t achieve filtering with a multiple select.
Works fine with a simple one with :
FJS.addCriteria({field: ‘myField’, ele: ‘#myselect’, selector: ‘select’ })
Is this a limitation or am I missing something?
Thanks!
Thank you for this Wonderfull Plugin.
But how can i get the current item cliqued after the callback function??
Thank you
Great tutorial! However, my project stumbled on “Cannot read property ‘replace’ of undefined” line 76 in filter.js(link at the top of this page). Any ideas? Has anyone else noticed this?
I’m a newbie and need to create a search criteria function much like yours that primarily uses checkboxes. I’m having issues since I’ve never worked much with js before. Using c#.net in vs2013. Do you have video tutorials/other references I can use? My project revolves around filtering search results by checking/unchecking boxes, no postbacks, all clientside. Uses RDF database.
Thanks for such effective tool !!
One question:
If my data is as follow,
var records = [
{“name”: “Somebody”,
“props”: {“p1”: “v1”, “p2”: “v2”}
“id”: 1
},
…
]
How can I set the filter criteria field for p1 or p2?
Would it be…?
{field: ‘props[“p1”]’, ele: ‘#p1’}
or otherwise?
Thanks in advance, Fausto
It’s me again. Sorry, I just found the answer to my previous question / comment in your GitHub page (copied below just in case):
For nested field selection. In below object to select filter on name field option value would be detail.name, for city detail.address.city.
Json object:
{
detail: { name: ‘Jiren’, address: {city: ‘Pune’} }
}
http://test.cota.org/custom/filter/examples/index.html
On the states drop down list the filter only works when I have state selected. if it is on “All States” then it looks for those states=”. How can I get the default of that drop down to tell the filter to look at everyone? I can do it with checkboxes, or if it was a range, but it isn’t either!
Hi. Thank you for this great tool. How can I change this tool to filter flowers by month and color?
Basically I want the slider to slide between January and December so then you can set it to only show flowers that’s available between February and June for example?
Sorry, I’m not sure how to do this.
For this you need Json data or api of flowers detail. Add month and color fields to Json record.
Two questions about cdn
1. Is there any cdn hosting filter.js?
2. Could you submit filter.js to cdnjs Library Repository? (https://github.com/cdnjs/cdnjs)
Thanks again, Fausto
HI Jiren
Thank you very much for your example Filter.js
I have a question . well as the total of the movies that are in your last upgrade “250” .
How can I know how many of them are from “Crime “, ” Drama” , “Adventure ”
Example : when you load the page see ” movies ( 250 ) ” ok . Now as few of the ” 250 ” is are “crime (XX) ” , ” Drama (XX) , without filtering .
Also as I can you order in ascending and descending by “rating” When i press button .
I have about 1200 records but since I can put pagination?
Greetings Julian
How to define the field in the filter criteria if the json object in the array is as follow
{
detail: { name: ‘Jiren’, ‘Org Unit’: ‘Head Office’ }
}
I tried as follow, but got an error (Uncaught TypeError: undefined is not a function)
{field: ‘detail[“Org Unit”]’, ele: ‘#filter_criteria input:checkbox’}
Thanks in advance, Fausto
How to multiple search_box work?
st = StreamTable(‘#stream_table’,
{
view: view,
per_page: 10,
data_url: ‘data/movies.json’,
stream_after: 0.5,
auto_sorting: true,
fetch_data_limit: 100,
callbacks: callbacks,
pagination: {span: 5, next_text: ‘Next →’, prev_text: ‘← Previous’},
search_box: ‘#st_actor’, fields: [‘actor’],
search_box: ‘#st_search’, fields: [‘year’, ‘name’]
}
, data);
Only one searchbox is working currently. You need to customize search event binding and search function to achieve this.
Thanks Jiren – sent from mobile
>
hi Jiren
How i can know the register number of “crime”, “adventure”, etc of your example filter.js
i know the total register is
callbacks: {
afterFilter: function(result){
$(‘#total_movies’).text(result.length);
}
}
Hi Juren.
What must be my criteria to work with a multi-select?
Sorry for the misspell it was realy late when I posted.
I work with .NET, and I’m quite new to handling json data. After doing some research, I wasn’t able to find a simple way to translate your views into .asp.net.
Obvoiusly in .net means other stuff thatn json. So it won’t work as it is.
Got any idea of how to rewrite this views simple as they are so that It’s easy to use them in .net webforms?
thanks!
Jiren, Hi! Can you help me. filtr.js – best work. The problem is how can i do five checkbox group on this page http://st-dance.ru/33.html
I need:
1) When visitor come to the page all chexkboxes are not checked, but the list of events is viewed all.
2) When visitor check the box -> filtering by parametr1
3) When visitor check other box -> filtering by parametre2
So events filtering by parametr1 and parametr2 and etc.
Thank you for answer!
Great work Jiren, is there a way to group the filter result according to a category or id.
Could be done by just using “order”. Using JsonQuery function for sorting after pressing a button (see post http://stackoverflow.com/questions/31178419/returning-ordered-json-data-inside-filter-js-using-jsonquery/31179915) To bad filter.js is not supporting JsonQuery “groupBy” for now.
Yes it could be done in next release I am adding callback at filter for ordering
Hi i am using this plugin to apply filter on my data. i am building bootstrap panel with json objects. now i want to show star rating for every panel using jquery raty plugin. when included that code in this rating is not coming. can u please help me this regard. actually i was struck in my application development.
for reference find the below code
Micro-template returned by filter.js json object is :
——————————————————————-
,
My Jquery is :
———————–
$(‘#divrating’).raty({
number: function() {
return $(this).attr(‘data-score’);
}
});
got it.. resolved .. thanksfor pluginn..
is this plugin support sorting?
For me its not working Its saying templateBuilder is not defined and FilterJS is not defined when I have given correct path to it. I have added filter.js and basic.js. I have used this with opencart to test. Even after loading needed libraries in correct order why I am getting these errors? Please reply
Is there any way to ignore case sensitiveness because I added to range and it only works for either uppercase value or lowercase value. Suppose I am looking for km and i have set its value as KM then it only works for KM not for km. I am talking about dropdown selection.
Hi Great JS, Just wanted some updates or fiddle if you can provide me to work with sorting, I need to apply sorting criteria please provide some fiddle to work with sorting by high to low and vice versa. Also If we can do it drop down.
How to use this filter concept in JSP pages, because won’t work in JSP.
Hi!
Thank you for a great script.
There is one hope. or you will not be able to use the gmap3.js in map.js?
Customizing the map is can be easily, I believe or not the various functions is attached. Or change the marker for each category, such as marker cluster.
Certainly please examine.
Nice to meet you.
Hi – love this script, we use it every day! However, we recently ran into an issue where this line fails (ver 1.5.1) :
return FilterJS(services, "#service_list", view, settings);
since the code thinks that the variable services is not yet defined. I’ve tried to declare services as variable in the calling PHP as well as earlier in the JS function, but both fail to work like they used to. Is there an easy fix to this problem – it used to work till about 3-6 months ago.
Would be great if we didn’t have to revisit the entire implementation to resolve this issue.
Thanks again!
great solution!
how can I add an Input textbox as filter criteria to have one searchbox and a second textbox as additionnal filter criteria? I tried the following but with no success:
FJS.addCriteria({field: ‘genre’, ele: ‘#genres’, event: ‘change’, selector: ‘:input’ })
Thanks
Dirk
Good job! Thank you!
Hello Jiren
I want to thank for your great solution in open source. Things are going great but i am getting issue in range slider. trigger(“change”) is not getting hit
$(‘#panel_efficiency_filter’).val(ui.values[0] + ‘-‘ + ui.values[1]).trigger(‘change’);
if i use some other filter after range . new range values are used so those are set. but filteration don’t happen after i change in range slider
Please do let me know if you have any solution
Thanks
Hitish
Hey, I don’t know if you still check this entry. But we are having some trouble with your filter.js and were hoping you could help. You see we have your filter.js program set up on our website to filter our search results. Now we have a text box we use as a generic search filter that interacts with filter.js, for some reason it seems that your program is somehow pulling in or reading JSON from a linked program page. Is there anything you can do to help us out here?
hi Jiren
I want to retrieve data from mysql but why data does not appear, here’s an example.
var url=”http://localhost/myproject/product/json_product”;
$.get(url, function(data, status){
var movies =data;
});
function json_product()
{
$categoryid=1;
$jsonProduct=array();
$data = $this->product_model->get_product_kategori($categoryid);
foreach ($data as $list){
$jsonProduct[]=array(
‘productid’ => $list[‘productid’],
‘productname’ => $list[‘productname’]
);
}
echo json_encode($jsonProduct);
}
I hope you can help me
thanks
var url=”http://localhost/myproject/product/json_product”;
$.get(url, function(data, status){
var movies =data;
});
function json_product()
{
$categoryid=1;
$jsonProduct=array();
$data = $this->product_model->get_product_kategori($categoryid);
foreach ($data as $list){
$jsonProduct[]=array(
‘productid’ => $list[‘productid’],
‘productname’ => $list[‘productname’]
);
}
echo json_encode($jsonProduct);
}
I hope you can help me
thanks
Great work jiren,
How can we filter data based on AND condition,
For example shirt of colour==blue (checked option) AND size == Large (checked option), so we have to get output only shirt with colour blue and size = large. Can we set this criteria in js?
Hi!!
Frist thanks for the code,
I have an error not contemplated, if I like filter any google maps coordinates between some coordiantes, for instance:
lat: 144.25123 – 145.77345
lon: -4.36344 – -5.33453
in a array of coordiates like
array = [{lat:144.85123, lon:-4.11231},{lat:145.35123, lon:-9.00231},{lat:144.4168, lon:4.97291},…]
This will fail by the negative filter range.
Also, ¿is possible get a ‘or’ filter of coordinates? Like you have a filter of elements that you can find these between a two coordinates range.
Thanks!!
F*ckin’ awesome things here. I’m very satisfied to look your article.
Thanks a lot and i’m looking forward to contact you. Will
you please drop me a e-mail?
Thanks. Really Great work.
Thanks for sharing this information
hello jiren
Its very good plugin to work it,I tried to use this plugin for dropdown select sorting like(new arrivals,price:low to high,high to low,name:a-z,z-a),I have checked all of the examples and documentation also you have given,none of the example solves,could you please tell me how to add it