Landing Page Details

Multipurpose jQuery Plugin for Filtering, Sorting & Searching

UniFilter jQuery Plugin is a #1 solution for filtering, sorting and searching through a set of items that can be your online shop, a photo gallery or simply some set of items.

With UniFilter you can set up any number of filters, range sliders and search boxes. On the other hand you can use only a single search box, while keep all other features disabled.

UniFilter can help you make your photo gallery or portfolio more organized and user-friendly by creating convenient and logical navigation. Plugin works well both on desktop and mobile devices.

UniFilter works by reading params (tags) from “data-” attributes assigned to list items and then it manipulates DOM tree by changing item position and appearance depending on active filters, selected ranges, search queries and sorting options.

Finally UniFilter can be placed anywhere in your website, in a sidebar or just above the grid. You just have to create an empty container and configure UniFilter to use it and the plugin will add all markup automatically.

KEY FEATURES

  • Four pure CSS3 animation effects – opacity, translate, rotate and scale
  • Support for multiple filters, range and search boxes
  • Tooltip with number of items matching specific filter
  • Ability to define custom function to sort filter labels
  • Custom label for every filter, search or range box
  • Sorting by multiple params with ability to switch sort order
  • Live refresh for every filter or search query
  • Adjustable precision for range slider & value prefix
  • Deeplinking feature with multiple filter params
  • Intelligent filtering with two modes – “default” and “bestmatch”
  • The “leading” filter option and ability to dynamically hide filters with no items
  • Range slider to filter items by any numeric values (price, date, etc)
  • Live search by one or few words
  • Support for fluid/fixed layouts
  • Callbacks and custom functions
  • No markup is required
  • Retina ready icons
  • Autoscroll feature
  • Works on desktop and mobile devices
  • Compatibility with the Masonry plugin

Demo

CHANGELOG

# version 1.0 (Apr 21, 2018) - plugin released! # version 2.0 (May 1, 2018) - major improvements in plugin code - added four CSS3 animation effects to filter/re-align items - added range slider to filter items by numeric values, like a price or rating - improved logic of "bestmatch" mode - improved compatibility with Masonry plugin # version 2.1 (May 2, 2018) - fixed problem with "multiple" filter option # version 2.2 (May 5, 2018) - fixed problem with range slider on mobile devices # version 2.3 (May 13, 2018) - fixed a problem with a getFilterData() function for retrieving filter tags # version 2.4 (Jul 19, 2018) - added support for retina screens # version 3.0 (Sep 5, 2018) - added deeplinking support - added ability to sort filters by using predefined function - added "hideEmptyFilters" option to hide filters with no matching items

CREDITS & SOURCES

Photos & Images – https://pxhere.com, Icons – https://www.iconfinder.com, Masonry Plugin – https://masonry.desandro.com, ImagesLoaded Plugin – https://imagesloaded.desandro.com


CUSTOMIZATION & REMOTE WORK

I’m available also for remote work! So if you need to modify the plugin (add extra features or change existing) feel free to contact me via the comments or via my website’s Contact Form. Also I can help to install my plugin or customize it to match your website design.

  • ltwebdesigns

    2018-06-19 01:50:19
    Purchased Reply

    Hi - Could I use this with a Weebly website? I'm trying to find something that will enable visitors to filter and search house plans by # of bedrooms and baths and/or other options. Also, I'm a designer, NOT a coder. Is this fairly easy to implement into an existing website and do you offer support that helps with that?? Thank you so much!!

  • flGravity

    2018-06-19 20:28:15
    Purchased Reply

    Hi! Yes, it's possible. With my plugin you can pefrom filtering by few options at the same time. Instructions how to install and configure UniFilter you can find in documentation, but if you are not a coder I can make this as custom work. If you are interested you can contact me via email and we will discuss everything.

  • ltwebdesigns

    2018-06-20 06:12:04
    Purchased Reply

    I need the plugin to allow visitors to search homes by #of beds/baths or other criteria such as in this site - www.platinumbuilt.com. (See Browse Floor Plans search bar at top) If it can do that, I will definitely purchase!

  • flGravity

    2018-06-21 16:13:30
    Purchased Reply

    Hello! I checked the website and can tell that "Browse Floor Plans" filters serve to perform request to database. My plugin in turn is filtering existing portfolio (data) on the page without any request to database. If you want to perform filtering by sending request to database with some search query then I think you should look for another plugin.

  • ltwebdesigns

    2018-06-21 23:15:49
    Purchased Reply

    No, that won't work for me. I'll research other options. Thanks anyway....

  • flGravity

    2018-06-22 13:34:21
    Purchased Reply

    No problem!

  • Ennllel

    2018-11-21 01:05:21
    Purchased Reply

    Hi. I have a problem using masonry and unifilter with infinitescroll.js. I have to update the filters after receiving the new items when scrolling and there is no way to update correctly filters and have to call $ again ('# filters'). Unifilter ($ ('# shop'), unifilter_options). This is the cause of problems in the masonry and the elements overlap. Is there any method to update the data filter with the new elements of the domain or something solution?now to update filters i'm using $container.on( 'load.infiniteScroll', function( event, response, path ) {}); scrollinfinite.js métod

  • flGravity

    2018-11-21 16:29:13
    Purchased Reply

    Hi! I understand your problem but UniFilter does not have a method to append new items dynamically. So if you add new items you should reload plugin init. To reload plugin use next code

    $('#filters').empty().unifilter('#list', options);
    
    BTW. You can turn off masonry and use fluid grid + @media queries

  • Ennllel

    2018-11-28 00:30:23
    Purchased Reply

    thanks

  • DialRound

    2018-04-21 12:21:34
    Purchased Reply

    I have already developed application which is having many reports. Already I have an universal sear box. 1. Can I use this product to search those data in the reports ? 2. will your plugin having any special features, when it comes for the reports ?

  • flGravity

    2018-04-21 16:35:45
    Purchased Reply

    Hello, could you tell how these reports look like? It's a grid or a table?

  • DialRound

    2018-04-21 21:41:25
    Purchased Reply

    Please find the image in below URL https://ibb.co/dF809H

  • flGravity

    2018-04-22 00:18:55
    Purchased Reply

    Yes, my plugin can search through such table. You can even configure UniFilter to display FEW search boxes to search data by different parameters. Every serchbox will be linked with its data- attribute that you assign to the entries in table. Or you can write your own JS function to pull data from elements directly. If you will have any other questions please let me know.

  • DialRound

    2018-04-22 08:11:57
    Purchased Reply

    Is it possible fro your plug in to filter data based on selected column heads / details ?

  • flGravity

    2018-04-22 16:37:08
    Purchased Reply

    I think yes. you will need to assign a data (w/ filter tags) to the entries and unifilter will automatically create a filters menu. if you would buy support i can help you with the configuration

  • OriginersMc

    2018-06-22 21:14:39
    Purchased Reply

    Hi! TIP: Beafoure upload a demo, check any user can't take it for free... If you need a solution, send private message (Trade will be defined via private message) Have a nice day!

  • AlixB

    2018-07-01 07:22:06
    Purchased Reply

    Hello, Do you have any idea how to use the stamp function of Masonry with UniFilter ? https://masonry.desandro.com/options.html#stamp Best regards, Alix

  • flGravity

    2018-07-12 04:36:08
    Purchased Reply

    Hi! Sorry for late reply. Masonry init code and options you can find in head section of template1/index.html or template2/index.html of Unifilter Zip package. It looks like this

    // Masonry Options
    var masonry_options = {
    itemSelector: 'li:not(.uf-clone)',
    percentPosition: true,
    gutter: 10
    };
    
    so you can add stamp option there. If it won't work you can exclude "stamp" items from UniFilter by using "selector" option like so
    selector: 'li:not(.stamp)'
    
    If it still won't behave like you expect, then let me know again

  • nbkjzv6

    2018-08-22 09:28:48
    Purchased Reply

    I just purchased this script because you stated that the filter would work with other elements other than images. I'm trying to get the filter to work using toggles, see example here http://html.manna.church/small-groups-search.html . The toggle is in place and it'll filter, but the script is adding a display:none style to it so you can't see it. It's actually the first empty space you see in the example url listed above. What am I doing wrong? Thanks

  • flGravity

    2018-08-22 18:58:03
    Purchased Reply

    Hi! just checked your site and to say more I would ask you to add toggle elements instead of images.

  • nbkjzv6

    2018-08-23 04:42:09
    Purchased Reply

    Could you please explain what you mean by add toggle "elements", I don't see that anywhere in your docs? I already added a toggle in the results area, it's just hidden because the script adds a "hidden" class to the div. How can I work around that?

  • nbkjzv6

    2018-08-23 10:41:29
    Purchased Reply

    Could you give a quick example of what you mean using an element other than image?

  • flGravity

    2018-08-23 15:30:56
    Purchased Reply

    See my reply in email.

  • mmongiardo

    2018-11-02 08:07:18
    Purchased Reply

    I am trying to display the filter tags in a specific order alphabetically. Is there a way to achieve this? I have been looking at the documentation but have been unable to find anything. Thanks!

  • flGravity

    2018-11-03 16:13:41
    Purchased Reply

    Hi! there is sortFilterTags callback function for filters specifically for sorting tags. To sort tags in alphabetical order you need to do next

     // filter options  
        var filter_options = {  
            "color": {  
                title: 'Color',   
                subtitle: 'Select one of few colors',  
                multiple: false,  
                tooltip: true,  
                leading: true,
               sortFilterTags: function(tags) {
                  return tags.sort();
               }  
            }};
    
    note that "sortFilterTags" option is a filter option.

  • PIXIceo

    2018-12-07 07:28:33
    Purchased Reply

    Hy Guys, the search function can not deal with ä,ü, ... any solution?

  • TmdStudio

    2018-04-23 14:53:47
    Purchased Reply

    Great Work, Congratulations GLWS :)

  • flGravity

    2018-04-23 15:29:44
    Purchased Reply

    thank you! )

  • jduribe30

    2018-05-21 06:18:52
    Purchased Reply

    Hi team. I have been looking for a way to create a template page for wordpress, to show a woocomerce products category in a grid with a menu filter by different attributes, like a shop page but without wordpress plugins. It s possible to archive this with this plugin?

  • flGravity

    2018-05-21 17:45:14
    Purchased Reply

    Hi! Yes, sure. You can integrate unifilter with any WordPress theme and configure it any way you like. You can have multiple filters by different parameters, depending what you need. If you will have any questions you can always contact me and I will be happy to assist.

  • jduribe30

    2018-06-10 21:24:04
    Purchased Reply

    I would like to use this plugin to filter this https://modamovement.com/workout-videos-single/. will you be able to give support to set it up? thanks

  • flGravity

    2018-06-14 02:57:30
    Purchased Reply

    Yes, I will

  • piglabs

    2018-07-23 06:01:34
    Purchased Reply

    will you be creating a wp plugin for this like you did with coolio?

  • flGravity

    2018-07-24 04:40:11
    Purchased Reply

    No, right now I have no plans for this. But maybe in future I will do WP version

  • creativewhs

    2018-09-28 05:40:55
    Purchased Reply

    I'm trying to use the filter on this page. http://goodsmillwork.com/filter/mouldings-filter/ But there are 2 things I'm having trouble with. 1. When you click on the different tabs, the url doesn't clear. 2. Sometimes the photo jumps down to the bottom of the page.

  • flGravity

    2018-09-29 15:07:05
    Purchased Reply

    Hi! 1. When I click "Type" filter its name is being added to the URL with a #. But when I click on Thickness filter, or Height filter name is added without #. The reason is that you have a " " or "/" symbols in filter name. Seems they break URL. I will check the code and will try to fix it. 2. Do you mean that thumb image sometimes does not align with the grid?

  • creativewhs

    2018-10-02 05:52:20
    Purchased Reply

    1. Ah, that makes sense. Thanks. 2. Yes, correct. Here is a video of the problem. https://www.screencast.com/t/cnp7o5Uz

  • flGravity

    2018-10-08 17:19:38
    Purchased Reply

    Sorry for delay. To allow any symbols in filter tag names you should replace

    // test structure (filter=tag or filter=tag1,tag2) 
    if(/^\w+=(\w+\,?)+$/.test(hash_parts[i]) ) {
    
    with
    // test structure (filter=tag or filter=tag1,tag2) 
    if(/^\w+=(.+)$/.test(hash_parts[i]) ) {
    
    in js/jquery.unifilter.js file. Then you can compress JS with http://dean.edwards.name/packer/ and save into js/jquery.unifilter.min.js

  • stefcab

    2018-05-11 04:36:59
    Purchased Reply

    Hi, does an option exist for the list of items appears only when the different parameters are used? The loaded HTML page will display no items at all (a blank list). The items will appears only when the user put into service the filters (through the different parameters). And to have the options to: removing / disabling "YOU MAY ALSO LIKE", the user will see only that is filtered, display below the filtering list. YOU MAY ALSO LIKE, will not appear. best, Stéphane

  • stefcab

    2018-05-11 07:13:33
    Purchased Reply

    At worst if the first request is tought, to have the option to disable disabling “YOU MAY ALSO LIKE” below the filter list, would be nice :)

  • flGravity

    2018-05-12 02:53:30
    Purchased Reply

    Hi! Regarding the first question, I think it's not possible. As for the "You may also like", you can just set empty string for "bestMatchText" plugin option to remove text or change styles via CSS. Third solution is not to use bestMatch mode. Set bestMatch: false plugin option and you'll see only those items that match selected filters.

  • stefcab

    2018-05-12 03:49:41
    Purchased Reply

    Thanks for the fast reply ! I guessed my first question was nos possible. I've just read the documentation this morning with calm, yes it's very simple, using (bestMatch: false). Yesterday I was tired, and instead of reading the doc with calm, I analysed the code, and tried to modify it..... How stupid I was ;). Thanks for your help and your great work !! Really Uniffilter is very good, and if the customers reads the documentation, it's a piece of cake !!! Have a good week-end !!

  • stefcab

    2018-05-12 03:55:26
    Purchased Reply

    A small typo error on the doc: You may be curious about the "bastMatch" option.

  • stefcab

    2018-05-12 08:28:41
    Purchased Reply

    Hi again, I tried to implement a dropdown select modifying a small part of code, the dropdowns are displayed but if an item name is clicked nothing happens. Would be nice to have as option, a dropdown select. thanks !

  • flGravity

    2018-05-13 17:43:10
    Purchased Reply

    Could you give me a link to check?

  • stefcab

    2018-05-14 00:58:30
    Purchased Reply

    thanks for you fast reply, I succeeded. Congratulations for your work!

  • dive1

    2018-06-06 21:09:55
    Purchased Reply

    Hi, I'm wondering if I can use your plugin on a wordpress theme, where the items (products) are displayed via JSON? The JSON data is converted to HTML by a TWIG template. Thanks in advance for your answer.

  • flGravity

    2018-06-08 00:22:43
    Purchased Reply

    Hi! I think yes, you can use my plugin. But please note that it's jQuery plugin, so you will need to add it to the theme in code (in functions.php) As long as JSON data is converted to the list (grid) I think you can just follow plugin documentation and configure UniFilter Also if you want you can hire me and I can integrate UniFilter into your website. If you are interested you can contact me privately via my profile page to discuss this. If you have any other questions please let me know!

  • dive1

    2018-06-08 03:31:36
    Purchased Reply

    Hi. Thanks for your reply. I was trying to implement it today, but according with your template examples, your list of items on the HTML have the "data-" attributes given manually for each item (such as color and size). So I hit a wall, not knowing how to continue since all of my items are displayed by one TWIG template, which imports the JSON and turns it into HTML. Therefore I can't give different data values for each item. So I guess the filtering and sorting is not possible.

  • flGravity

    2018-06-08 16:28:09
    Purchased Reply

    Alternatively to the data- attributes you can set custom function to get filter data, like getSortData(), getSearchData(), getFilterData() and getRangeData(). So for example after conversion from JSON you get a markup like this

      <li>
       
    Some Name
    tag, tag
    … </li>
    you can use that for filters, sorting and search. You just have to write a getFilterData() function to pull contents of DIVs and convert it to array

  • dive1

    2018-06-14 21:45:22
    Purchased Reply

    Unfortunately I couldn't find any information or examples about using the custom function getFilterData() on your documentation. I'm trying to use data- attributes, which I can see are rendered in the console in html dynamically by handlebars js template engine. But still the div = uf-filter-wrap doesn't get populated and no filtering menu is rendered, it is there, but is just empty. Do you have any suggestions?

  • flGravity

    2018-06-19 20:29:53
    Purchased Reply

    It's hard to tell what is the issue, but if you give me a website I can check it.

  • creativewhs

    2018-06-28 04:13:19
    Purchased Reply

    Is it possible to have the filters change based on the current selection. For example: If Style: Round is selected, If no products are both Round AND Man, Man would not appear in the list. This would allow for greater product filtering filtering.

  • creativewhs

    2018-06-28 04:57:51
    Purchased Reply

    I think the term I was looking for was dynamic filtering.

  • creativewhs

    2018-06-29 00:05:04
    Purchased Reply

    I found the "leading" option. I would really like to hide the filter options with no matches.

  • flGravity

    2018-06-29 18:18:37
    Purchased Reply

    The leading option makes so that if list item does not have a selected term, it won't show. Works like logical AND

  • Rhiamon

    2018-11-24 10:29:48
    Purchased Reply

    hey man, deeplink doesn't work when you have set extra parameters, like http://plugins.gravitysign.com/unifilter/template1/index.html#gender=man&style=round&extra_parameter=123456 regards

  • flGravity

    2018-11-25 18:18:19
    Purchased Reply

    Thanks for letting me know. I will fix in next update

  • Ennllel

    2018-12-07 00:20:47
    Purchased Reply

    Is it possible to load all the possible filters without being in the html attributes? And how could we do it

  • 2fast2plugins

    2018-05-27 18:14:41
    Purchased Reply

    Hi, Great plugin for filtering and sorting. I have an issue when it comes to the filtering. When I select a filter, the page jumps to the top on the page. I see in the file there is e.preventDefault(); but the jump still occurs. I can't link you as it's a private intranet, do you have any ideas on this one? I've changed the a href instead to be a button with data-filter tag .. but still it jumps..

  • flGravity

    2018-05-27 22:02:24
    Purchased Reply

    Hi! I recommend to check for any JS erorrs in console?

  • km7809

    2018-11-20 17:06:23
    Purchased Reply

    Can I do something like this with your script? https://www.taylorjames.com/work tab name for first filter, tab content with second filter?

  • flGravity

    2018-11-21 16:32:14
    Purchased Reply

    No. It's better to make such filter menu from scratch, rather than modifying my plugin.

  • pachecojr

    2018-11-29 04:21:58
    Purchased Reply

    Hey, I really love the possibilities of this plugin. Can you just let me know if it's possible to use it in this page http://agenciacomvix.com.br/cs3/materiais.php to put all the filters working. This will be my first time buying a plugin and I am really worried I might have trouble installing it.

  • flGravity

    2018-11-30 19:46:45
    Purchased Reply

    Hi! Yes, it's possible. If you will have any questions please let me know

  • pachecojr

    2018-12-07 06:00:29
    Purchased Reply

    I am actually having trouble with the mobile version of it. The menu is not opening. on http://agenciacomvix.com.br/cs3/materiais-nacionais.php