#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Filter New
- Dialogs
- Fixed toolbars
- Flip switch, slider
- Flip switch New
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icons New
- Links
- Listviews
- Loader
- Navbar
- Navbar, persistent
- Pages
- Panels
- Popup
- Radio buttons
- Select
- Select, custom
- Slider, single
- Slider, dual range
- Table, column toggle
- Table, reflow
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Maps
- Google Maps & Geolocation
- Google Maps with List toggle
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working.
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- How do I turn off the automatic hiding of the url bar?
- Events
- How do I use touch and mouse events?
- Theme and styling
- How does theming work?
- Apps
- How do I need to configure PhoneGap/Cordova?

# Filter API

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 options 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.

- 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 to filter the respective element by.

## 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. Note that the select element is completely hidden if no option matches the filtertext.

## 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-theme` to declare a specific theme for the filter (overriding inheritance). `Data-inset="true"` will inset the filter element, while `data-placeholder` allows to customize the inputs placeholder text. You can also set custom classes on the generated filter wrapper using the wrapperClass attribute or specifying the `data-wrapper-class` when creating a filter. Lastly, `data-mini="true"` will apply the mini styling to the filter input. Here is an example using all styling options:

- 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.

- Apple
- Banana
- Cherry
- Cranberry
- Grape
- Orange

## Filter Custom Callback

As with the listview extension, you can provide custom callback functions to the filter or override the filter altogether on the `filterablebeforefilter` event. Please note that the filter has a delay of 250ms before the filter actually triggers. This prevents running the filtering function multiple times while the user is typing.

To set a custom filtering function, either override the callback property on `mobileinit` and make sure to pass the tree parameters: text to filter, searchValue to filter for and item to filter.

`

    $.mobile.document.bind("mobileinit", function() {
    	$.mobile.filterable.prototype.filterCallback = function( text, searchValue, item ) {
    		// your custom filtering logic goes here
    	});
    });

`

Alternatively, you can override the filter on the widget itself by setting the appropriate option:

`

    $("selector").filterable("option", "filterCallback", function( text, searchValue, item ) {
    		// your custom filtering logic goes here
    	});
    });

`

To override the filter altogether (for example when loading data server-side or from localstorage), bind to the `filterablebeforefilter` event.

`

    $(".selector input").on("filterablebeforefilter", function( e, data ) {
    		var value;

    		e.preventDefault();
    		value = data.input.value;
    		// trigger own request to database
    	});
    });

`

## Filter Target

By default, the filter widget is inserted just before the element it was called on. To insert the filter in another place, use the `data-target` attribute and specify a class name. The filter will be appended to this class.

- Acura
- Audi
- BMW
- Cadillac
- Chrysler

The filter is appended below using `data-target`

## Filter Selector

The filter widget can also be used on multiple datasets (for example a listview inside a panel and corresponding images in the main section). To set up a widget for multiple datasets, use the `data-selector` attribute and declare a class, which is set on the wrapping container of all datasets you want to have filtered.

This

are

Filterable

Dataset

- This
- is a
- filterable
- set aswell