About

UniFilter jQuery Plugin was created to make filtering, searching and sorting in a set of items as simple as possible. In its basis plugin takes all data from "data-" attributes assigned to list items and then it manipulates DOM tree by changing their position and appearance depending on active filters, range selections, search queries and sorting.

UniFilter allows to use all of its features at the same time or separately from each other. For instance, you may want to add a single search box for a small photo gallery or five filters for your online shop.

Now it's time to see UniFilter in action! In case of any questions you can either contact me directly or check plugin Documentation online

UniFilter Features

Filtering

UniFilter allows you to add as many filters as you want and they can be setup to work independently from each other or together (see "leading" filter option). Filtering is performed by looking for a match with comma-separated words that you assign to list items via data-{filter_name} attribute

Searching

UniFilter can search items by one or a few words at the same time. You specify these search words by assigning data-{search_name} attributes to list items. You may have multiple search boxes, so you can perform searching by different parameters, e.g. color, name, etc

Sorting

With UniFilter you can have a single sort box, but with multiple sort options which take their values from data-{sort_name} attributes. For every option you can define the initial sorting order and later you can change it by clicking corresponding icon.

Custom Functions

For every filter, range slider, sort and search box you can provide a custom function to get parameters in different way as via data- attributes. This is handy, for example, if you want to search items by name and every item in a list has a title element that you can easily get the name from.

Intelligent Search

If you enable "bestMatch" plugin option UniFilter shows items that match most of active filters & search queries at the top of the grid, while items with fewer matches appear below the line with "You may also like" message

Deep Filtering

With UniFilter plugin you can perform deep filtering with multiple filters at the same time. Just set "leading" option to true for all filters and UniFilter will show only those items that match ALL of the selected filters.

CSS3 Animations

Starting with v2.0 UniFilter provides 4 animation effects to show/hide items during filtering or searching - "opacity", "scale", "translate" and "rotate". They can be easily customized through unifilter.css.

Range Sliders

Along with filters, sort and search features you can also use range sliders that allows you to filter items by selecting a numeric range. Range sliders can be used to filters items by price range or rating.