The children of any element can be filtered by setting the attribute data-filter="true"
on the element. By default, the text contained in each child is used for filtering, however, you also have the option of setting the attribute data-filtertext
to a string value on any child that will be considered for filtering to associate custom filter text instead.
Basic filter
The filter widget is based on and replaces the listview filter extension. Thus, you can set data-filter="true"
on a listview to generate a filter for its list items.
Nevertheless, the way in which a filterable is constructed differs from the way the listview filter extension worked in one important regard: the text field for entering the search string is not provided. Instead, you can provide the text field in your markup and have the filterable make use of it by providing a selector that will retrieve the text field as the value of the filterable's data-input
attribute. Add class ui-filterable
to the form
in which you wrap the search input or to the listview to have the framework adjust the margin between the text field and listview.
The deprecated behavior whereby the filterable injects a text field before the element whose children are to be filtered is retained for version 1.4.0 to help with the transition from the listview filter extension, however, it will be removed in 1.5.0.
- Acura
- Audi
- BMW
- Cadillac
- Ferrari
Table filter
You are not limited to using filters on listviews. To create a filter for a table widget, set
data-filter="true"
on the table element to generate a filter for table rows.
Rank | Movie Title | Year | Rating | Reviews |
---|---|---|---|---|
1 | Citizen Kane | 1941 | 100% | 74 |
2 | Casablanca | 1942 | 97% | 64 |
3 | The Godfather | 1972 | 97% | 87 |
Controlgroup Filter
The filter widget can be used on other widgets, too. To filter a list of controlgroup buttons, declare data-filter="true"
on the element that creates the controlgroup (Note that you can also use the data-filtertext
attribute to declare the text string used for filtering the respective element.
Filter Select
The widget also works on select
widgets by hiding options that do not match the filter text. To use a filter for options
, declare the data-filter
attribute on the select element.
Filter Collapsible Set
Animals
- Cats
- Dogs
- Lizards
- Snakes
Cars
- Acura
- Audi
- BMW
- Cadillac
Planets
- Earth
- Jupiter
- Mars
- Mercury
Filter Collapsible Set and collapsible children
Animals
- Cats
- Dogs
- Lizards
- Snakes
Cars
- Acura
- Audi
- BMW
- Cadillac
Planets
- Earth
- Jupiter
- Mars
- Mercury
Filter Anything
The widget can be used for filtering on any element containing other elements, like a div
containing p
elements.
These Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
tags nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
Tags erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
are et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
Filterable Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
Filter Styling
The filter widget supports the same attributes as the previous listview extension. Use data-filter-theme
to declare a specific theme for the text field (overriding inheritance). data-filter-placeholder
allows you to customize the input's placeholder text. In addition, the filterable widget will synchronize options shared between the textinput widget and the widget whose children it filters to make sure that the value of the textinput widget options is the same as the value of the widget options. So, for example, if you set data-inset="true"
on the listview, then the corresponding textinput widget will also be inset.
NOTE: This behavior is deprecated and will be removed in 1.5.0. The correct way forward is to provide the text field (or any other widget that emits the "change" signal) as part of the original markup and to pass a selector that will retrieve it to the filterable widget via the data-input
attribute.
- Acura
- Audi
- BMW
- Cadillac
- Ferrari
Filter Reveal
The filter reveal feature makes it easy to build a simple autocomplete
with local data. When a filter has the data-filter-reveal="true"
attribute, it will auto-hide all the list items when the search
field is blank. The data-filter-placeholder
attribute can be
added to specify the placeholder text for the filter. If you need to search
against a long list of values, we provide a way to create a filter with a
remote
data source.