![]() ![]() And if I unselect the I should update the other categories and filters accordingly. 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). ![]() When I select a filter on category 1 I need to update the filters in other category. ![]() Also I can select only one filter per category. In my case the filter links will be created dynamically based on the search results. I have created search results filter following the example above, however I have few questions. Thanks for the overwhelming response! I have added mustache templating for rendering the HTML view snippets. Thanks for the overwhelming response! I have added mustache templating for rendering the HTML view snippets.ĭefine mustache.js template in HTML page.Īlternatively, 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! Have a look at and to see filter.js in action in 2 different scenarios!Īlternatively, you can also clone the GitHub repository and see the demos/filterjs.html Ensure that you have jquery-ui.js included in the header. Here the slider id change event triggers the filter and the value of the slider is used to filter the JSON data. Note the boundary limiters ‘below-30′ and ’50-above’. So, now the filtering will trigger on the the range of age – this can be customized as you wish. This tells the filter.js that it needs to pick up the range from the HTML element for filtering. Its exactly the same as shown earlier except for the additional. Rendering is done only once and then the display is toggled as needed. 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. Here is how this works: Category based filteringĪll the checkboxes under the are used as the selectors. Var fJS = new filterJS(people, "#people_list", view, settings) 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. Var people = ) Ī more detailed example is available in the examples given on github. Remember that the top-level entity will be used for rendering the view – in this case ‘person’. You can generate JSON data in any way you wish. For now, we live with it □ Defining the search criteria and the JSON objects Currently, its our own custom code but we have plans to upgrade this to integrate with mustache or handlebars. ![]() There are dependencies on how to render HTML components.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |