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.
