Filter - jQuery Mobile Demos

##

Demos

Menu Search

# Filterable

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.

Button 1 Button 2 Button 3 Button 4 Button 5

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

- 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 that will become the new default for all filterable widgets, override the `filterCallback` option in the filterable widget prototype in a "mobileinit" signal handler:

    $( document ).one( "mobileinit", function() {
    	$.mobile.filterable.prototype.options.filterCallback = function( index, searchValue ) {
    		// In this function the keyword "this" refers to the element for which the
    		// code must decide whether it is to be filtered or not.
    		// A return value of true indicates that the element referred to by the
    		// keyword "this" is to be filtered.
    		// Returning false indicates that the item is to be displayed.
    		//
    		// your custom filtering logic goes here
    	});
    });

To set a custom filtering function for a single filterable widget, set the `filterCallback` option:

    $.mobile.document.one( "filterablecreate", "#myFilterable", function() {
    	$( "#myFilterable" ).filterable( "option", "filterCallback", function( index, searchValue ) {
    		// The previous example explains the signature of the callback function.
    		//
    		// 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" ).on( "filterablebeforefilter", function( e, data ) {
    		var value;

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

## Pre-rendering

The filterable widget runs the filter a single time during startup to make sure the list of children reflects the value entered in the search input. You can avoid this step by specifying the `data-enhanced="true"` attribute. When set to true, the filterable will assume that you have correctly applied the class `ui-screen-hidden` to those children that should be initially hidden.

The filterable widget is able to use the search input whether or not the search input is itself pre-rendered. In the example below, both the search input and the filterable are pre-rendered.

Acura Renault Hyundai

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget click to expand contents

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget click to expand contents

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget click to expand contents

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events click to expand contents

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms click to expand contents

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids click to expand contents

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons click to expand contents

  - Icons
  - Grunticon loader

- ### Listview widget click to expand contents

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation click to expand contents

  - Navigation
  - Linking pages
  - Hash processing demo
  - Page Navigation Events

- ### Pages click to expand contents

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget click to expand contents

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget click to expand contents

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget click to expand contents

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget click to expand contents

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget click to expand contents

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming click to expand contents

  - Default theme
  - Classic theme

- ### Toolbar widget click to expand contents

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos click to expand contents

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle

- Home
- Introduction
- Buttons
- Button widget

- ### Checkboxradio widget click to expand contents

  - Checkboxes
  - Radio buttons

- ### Collapsible (set) widget click to expand contents

  - Collapsible
  - Dynamic collapsibles
  - Collapsible set

- ### Controlgroup widget click to expand contents

  - Controlgroup
  - Dynamic controlgroups
- Datepicker

- ### Events click to expand contents

  - Swipe list items
  - Swipe page navigation
- Filterable widget
- Flipswitch widget

- ### Forms click to expand contents

  - Forms
  - Hide labels
  - Field containers
  - Forms disabled
  - Forms gallery

- ### Grids click to expand contents

  - Grids
  - Buttons in grids
  - Custom responsive grids
- Grouping and dividing content

- ### Icons click to expand contents

  - Icons
  - Grunticon loader

- ### Listview widget click to expand contents

  - Listview
  - Listview autocomplete
  - Listview autocomplete remote data
  - Listview autodividers linkbar
  - Listview autodividers selector
  - Nested Listviews
  - Listview collapsible list items (flat)
  - Listview collapsible list items (indented)
  - Listview responsive grid
- Loader widget
- Navbar widget

- ### Navigation click to expand contents

  - Navigation
  - Linking pages
  - Hash processing demo
  - Page Navigation Events

- ### Pages click to expand contents

  - Pages
  - Single page
  - Multi-page template
  - Dialog page

- ### Panel widget click to expand contents

  - Panel
  - External panels
  - Fixed panels
  - Panels responsive
  - Custom panel style
  - Panel open on swipe
  - Panel external and internal

- ### Popup widget click to expand contents

  - Popup
  - Popup alignment
  - Popup arrow size
  - Dynamic popups
  - Popups with iframes
  - Popup image scaling
  - Popup outside multi-page
- Rangeslider widget
- Responsive Web Design

- ### Selectmenu widget click to expand contents

  - Selectmenu
  - Custom select menu
  - Custom select menu with filter

- ### Slider widget click to expand contents

  - Slider
  - Slider flip toggle switch
  - Slider tooltip

- ### Table widget click to expand contents

  - Table Column Toggle
  - Table Column Toggle demo
  - Table Column Toggle heading groups
  - Table Column Toggle options
  - Table Reflow
  - Table Reflow heading groups
  - Table Reflow stripes and strokes
  - Table Reflow custom styles
- Tabs widget
- Textinput widget

- ### Theming click to expand contents

  - Default theme
  - Classic theme

- ### Toolbar widget click to expand contents

  - Toolbar
  - Dynamic toolbars
  - External toolbars
  - Fixed toolbars
  - Fullscreen toolbars
  - Fixed external toolbars
  - Persistent toolbars
  - Ajax optimized toolbars
  - Form in toolbar
- Transitions

- ### 3rd party API demos click to expand contents

  - Backbone RequireJS
  - Google Maps geolocation
  - Google Maps list toggle