{"id":32,"date":"2023-08-25T17:34:42","date_gmt":"2023-08-25T17:34:42","guid":{"rendered":"\/\/api.jquerymobile.com\/1.4\/?p=32"},"modified":"2023-08-25T17:34:42","modified_gmt":"2023-08-25T17:34:42","slug":"filterable","status":"publish","type":"post","link":"https:\/\/api.jquerymobile.com\/1.4\/filterable\/","title":{"rendered":"Filterable Widget"},"content":{"rendered":"<article id=\"filterable1\" class=\"entry widget\"><h2 class=\"section-title\">\n<span>Filterable Widget<\/span><span class=\"version-details\">version added: 1.4<\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Makes the children of an element filterable.<\/p>\n<section id=\"quick-nav\"><header><h2>QuickNav<\/h2><\/header><div class=\"quick-nav-section\">\n<h3>Options<\/h3>\n<div><a href=\"#option-children\">children<\/a><\/div>\n<div><a href=\"#option-defaults\">defaults<\/a><\/div>\n<div><a href=\"#option-disabled\">disabled<\/a><\/div>\n<div><a href=\"#option-enhanced\">enhanced<\/a><\/div>\n<div><a href=\"#option-filterCallback\">filterCallback<\/a><\/div>\n<div><a href=\"#option-filterPlaceholder\">filterPlaceholder<\/a><\/div>\n<div><a href=\"#option-filterReveal\">filterReveal<\/a><\/div>\n<div><a href=\"#option-filterTheme\">filterTheme<\/a><\/div>\n<div><a href=\"#option-input\">input<\/a><\/div>\n<\/div>\n<div class=\"quick-nav-section\">\n<h3>Methods<\/h3>\n<div><a href=\"#method-destroy\">destroy<\/a><\/div>\n<div><a href=\"#method-disable\">disable<\/a><\/div>\n<div><a href=\"#method-enable\">enable<\/a><\/div>\n<div><a href=\"#method-option\">option<\/a><\/div>\n<div><a href=\"#method-refresh\">refresh<\/a><\/div>\n<\/div>\n<div class=\"quick-nav-section\">\n<h3>Events<\/h3>\n<div><a href=\"#event-beforefilter\">beforefilter<\/a><\/div>\n<div><a href=\"#event-create\">create<\/a><\/div>\n<div><a href=\"#event-filter\">filter<\/a><\/div>\n<\/div><\/section><div class=\"longdesc\" id=\"entry-longdesc\">\n\t\t<h2>Filterable Widget<\/h2>\n\t\t<p>The filterable widget allows you to filter the children of an element. The filtering is accomplished by applying the class <code>ui-screen-hidden<\/code> to those children for which a filter callback function provided via the widget&apos;s <code>filterCallback<\/code> option returns <code>true<\/code>.<\/p>\n\t\t<h3>Backwards compatibility<\/h3>\n\t\t<strong>The filterable widget features provided for backwards compatibility are deprecated as of 1.4.0 and will be removed in 1.5.0.<\/strong>\n\t\t<p>The filterable widget is a generalization of the <code>listview<\/code> widget&apos;s filter extension that was available in jQuery Mobile 1.3. It retains API compatibility with the <code>listview<\/code> filter. Its behavior is also made backwards compatible by the following <strong>deprecated<\/strong> features:<\/p>\n\t\t<ul>\n\t\t\t<li>If no source is provided for the filterable via a <code>data-input<\/code> attribute, it will generate a text input and place it before the element.<\/li>\n\t\t\t<li>It provides the <code>filterPlaceholder<\/code> option which sets the <code>placeholder<\/code> attribute on the generated text input.<\/li>\n\t\t\t<li>It provides the <code>filterTheme<\/code> option which sets the <code>theme<\/code> option on the generated text input.<\/li>\n\t\t\t<li>If a <a href=\"\/1.4\/collapsibleset\/\">collapsibleset<\/a>, <a href=\"\/1.4\/select\/\">selectmenu<\/a>, <a href=\"\/1.4\/controlgroup\/\">controlgroup<\/a>, or <a href=\"\/1.4\/listview\/\">listview<\/a> widget is instantiated on the element whose children are to be filtered, it synchronizes those widget options with the generated text input that the text input widget also provides (options such as &quot;corners&quot; or &quot;mini&quot;).<\/li>\n\t\t\t<li>It provides special handling for listviews:\n\t\t\t\t<ul>\n\t\t\t\t\t<li>When filtering listview items, the default filter callback will not hide list items marked as dividers, however,<\/li>\n\t\t\t\t\t<li>When filtering listview items, the widget enables the listview widget&apos;s <code>hidedividers<\/code> option, which causes the new listview hidedividers extension to automatically hide dividers for categories wherein all items are hidden.<\/li>\n\t\t\t\t<\/ul>\n\t\t\t\tTogether, these two behaviors reproduce the jQuery Mobile 1.3 behavior of the listview filter.\n\t\t\t<\/li>\n\t\t<\/ul>\n\n\t\t<h3>Setup<\/h3>\n\t\t<p>To render the children of an element filterable, perform the following steps:\n\t\t\t<ol>\n\t\t\t\t<li>Create an element that will serve as the source for the filterable. It can be any element that emits a <code>change<\/code> signal and has a value that can be accessed via the jQuery <a href=\"\/\/api.jquery.com\/val\/\">.val()<\/a> plugin. This is usually a text input. The filterable widget reacts to the <code>change<\/code> signal by reading the value of the input after a short delay and iterating over all the children to determine whether they should be shown or hidden according to the filter callback provided.<\/li>\n\t\t\t\t<li>Add the attribute <code>data-filter=&quot;true&quot;<\/code> to the element whose children will be filtered.<\/li>\n\t\t\t\t<li>Add the attribute <code>data-input<\/code> to the element whose children will be filtered. The value of the attribute is a string containing a jQuery selector that will return the element to be used as the source for the filterable.<\/li>\n\t\t\t\t<li>Add the child elements that will be filtered. You may add or remove child elements at any time, however, when you add or remove child elements you should call the <code>refresh<\/code> method on the filterable widget, to ensure that the new children are shown or hidden in accordance with the latest input provided by the user.\n\t\t\t\t<p>\n\t\t\t\tChild elements may have the <code>data-filtertext<\/code> attribute set. In that case, the default filter callback will hide a given child element only if the value of the <code>data-filtertext<\/code> attribute does not contain the string provided by the user. If the <code>data-filtertext<\/code> attribute is absent, the child will be hidden if its text content does not contain the string provided by the user.\n\t\t\t\t<\/p>\n<\/li>\n\t\t\t<\/ol>\n\t\tThe example below illustrates a simple filterable widget setup.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;text&quot;<\/span> <span class=\"hljs-attr\">data-type<\/span>=<span class=\"hljs-string\">&quot;search&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;filterable-input&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;controlgroup&quot;<\/span> <span class=\"hljs-attr\">data-filter<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span> <span class=\"hljs-attr\">data-input<\/span>=<span class=\"hljs-string\">&quot;#filterable-input&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;pizza&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    Pizza<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;checkbox&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;pizza&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;goulash&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    Goulash<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;checkbox&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;goulash&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;falafel&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    Falafel<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;checkbox&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;falafel&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;spring-rolls&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    Spring Rolls<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;checkbox&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;spring-rolls&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t<iframe src=\"\/1.4\/resources\/filterable\/example1.html\" style=\"width:100%;height:300px;border:0px\"><\/iframe>\n\n\t\t<h3>&quot;Reveal&quot; mode<\/h3>\n\t\t<p>The normal initial state of a filterable widget is that all the children are shown. In contrast, a filterable in &quot;reveal&quot; mode initially hides all its children. Once the user starts filtering, however, the filterable widget will display only those children that contain the text entered by the user, whether the filterable widget is in &quot;reveal&quot; mode or not.<\/p>\n\t\t<p>You can turn on &quot;reveal&quot; mode by adding the attribute <code>data-filter-reveal=&quot;true&quot;<\/code> to the element whose children will be filtered.<\/p>\n\t\t<p>The example below illustrates the behavior of a filterable widget in &quot;reveal&quot; mode:<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;text&quot;<\/span> <span class=\"hljs-attr\">data-type<\/span>=<span class=\"hljs-string\">&quot;search&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;filterable-input&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;controlgroup&quot;<\/span> <span class=\"hljs-attr\">data-filter-reveal<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span> <span class=\"hljs-attr\">data-filter<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span> <span class=\"hljs-attr\">data-input<\/span>=<span class=\"hljs-string\">&quot;#filterable-input&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;pizza&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    Pizza<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;checkbox&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;pizza&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;goulash&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    Goulash<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;checkbox&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;goulash&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;falafel&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    Falafel<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;checkbox&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;falafel&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">&quot;spring-rolls&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    Spring Rolls<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">&quot;checkbox&quot;<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;spring-rolls&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t<iframe src=\"\/1.4\/resources\/filterable\/example2.html\" style=\"width:100%;height:300px;border:0px\"><\/iframe>\n\t\t<h3 id=\"custom-filter-example\">Custom filters<\/h3>\n\t\t<p>The filterable widget&apos;s <code>filterCallback<\/code> option allows you to set a custom callback. In the example below items are filtered by their ordinal, which can be specified using page printing conventions such as &quot;1,2&quot; or &quot;4-9&quot;, or both (&quot;1,2,4-9,12&quot;).<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$.mobile.filterable.prototype.options.filterCallback = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> index, searchValue <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-keyword\">var<\/span> idx;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-keyword\">if<\/span> ( searchValue ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    searchValue = searchValue.split( <span class=\"hljs-string\">&quot;,&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    searchValue = $.map( searchValue, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> element <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-keyword\">var<\/span> ar = element.split( <span class=\"hljs-string\">&quot;-&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-keyword\">return<\/span> ar.length === <span class=\"hljs-number\">1<\/span> ? <span class=\"hljs-built_in\">parseInt<\/span>( element ) :<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          [ [ <span class=\"hljs-built_in\">parseInt<\/span>( ar[ <span class=\"hljs-number\">0<\/span> ] ), <span class=\"hljs-built_in\">parseInt<\/span>( ar[ <span class=\"hljs-number\">1<\/span> ] ) ] ];<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-keyword\">for<\/span> ( idx = <span class=\"hljs-number\">0<\/span> ; idx &lt; searchValue.length ; idx++ ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-keyword\">if<\/span> ( ( $.type( searchValue[ idx ] ) === <span class=\"hljs-string\">&quot;number&quot;<\/span> &amp;&amp;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          index === searchValue[ idx ] ) ||<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        ( $.type( searchValue[ idx ] ) === <span class=\"hljs-string\">&quot;array&quot;<\/span> &amp;&amp;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          index &gt;= searchValue[ idx ][ <span class=\"hljs-number\">0<\/span> ] &amp;&amp;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>          index &lt;= searchValue[ idx ][ <span class=\"hljs-number\">1<\/span> ] ) ) {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>        <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-literal\">false<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-keyword\">return<\/span> !!searchValue;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>};<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t<iframe src=\"\/1.4\/resources\/filterable\/example3.html\" style=\"width:100%;height:300px;border:0px\"><\/iframe>\n\n\t\t<span>\n\t<h2 id=\"providing-pre-rendered-markup\">Providing pre-rendered markup<\/h2>\n\t<p>You can improve the load time of your page by providing the markup that the filterable widget would normally create during its initialization.<\/p>\n\t<p>By providing this markup yourself, and by indicating that you have done so by setting the attribute <code>data-enhanced=&quot;true&quot;<\/code>, you instruct the filterable widget to skip these DOM manipulations during instantiation and to assume that the required DOM structure is already present.<\/p>\n\t<p>When you provide such pre-rendered markup you must also set all the classes that the framework would normally set, and you must also set all data attributes whose values differ from the default to indicate that the pre-rendered markup reflects the non-default value of the corresponding widget option.<\/p>\n<\/span>\n\t\t<p>The filterable widget runs the filter on its children upon instantiation to ensure that the initial list of displayed children satisfies the initial value of the input source. By setting the attribute <code>data-enhanced=&quot;true&quot;<\/code>, you instruct the filterable widget that no initial filtering is to be performed. This means that you must apply the class <code>ui-screen-hidden<\/code> to any children which must initially be hidden due to the initial value of the search input.<\/p>\n\t\t<p><strong>Note:<\/strong> If the element whose children are to be filtered is enhanced by another widget as well, such as for example a <a href=\"\/1.4\/listview\/\">listview<\/a> or a <a href=\"\/1.4\/controlgroup\/\">controlgroup<\/a> then you are required to provide pre-rendered markup for the other widget as well, because the attribute <code>data-enhanced=&quot;true&quot;<\/code> will influence the initialization behavior of the other widget as well.<\/p>\n\t\t<p>In the example below, pre-rendered markup for a filterable is provided. The attribute <code>data-filter-reveal=&quot;true&quot;<\/code> is explicitly specified, since the presence of the <code>ui-screen-hidden<\/code> class on all the children indicates that they are initially hidden. The controlgroup widget containing the children is also pre-rendered, because the <code>data-enhanced=&quot;true&quot;<\/code> attribute applies to the <a href=\"\/1.4\/controlgroup\/\">controlgroup<\/a> widget as much as it does to the filterable widget.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">&quot;pre-rendered-filterable&quot;<\/span> <span class=\"hljs-attr\">data-type<\/span>=<span class=\"hljs-string\">&quot;search&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-controlgroup ui-controlgroup-vertical ui-corner-all&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;controlgroup&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">data-filter<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">data-input<\/span>=<span class=\"hljs-string\">&quot;#pre-rendered-filterable&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">data-filter-reveal<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">data-enhanced<\/span>=<span class=\"hljs-string\">&quot;true&quot;<\/span>&gt;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-controlgroup-controls&quot;<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;index.html&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-screen-hidden&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span>&gt;<\/span>General<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;settings.html&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-screen-hidden&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span>&gt;<\/span>Settings<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;advanced.html&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-screen-hidden&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span>&gt;<\/span>Advanced<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">&quot;notifications.html&quot;<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">&quot;ui-screen-hidden&quot;<\/span> <span class=\"hljs-attr\">data-role<\/span>=<span class=\"hljs-string\">&quot;button&quot;<\/span>&gt;<\/span>Notifications<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t<iframe src=\"\/1.4\/resources\/filterable\/example4.html\" style=\"width:100%;height:300px;border:0px\"><\/iframe>\n\n\t<\/div>\n<section id=\"options\"><header><h2>Options<\/h2><\/header><div id=\"option-children\" class=\"api-item first-item\">\n<h3>children&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a> or <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> or <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>() or <a href=\"http:\/\/api.jquery.com\/Types\/#Element\">Element<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>&quot;&gt; li, &gt; option, &gt; optgroup option, &gt; tbody tr, &gt; .ui-controlgroup-controls &gt; .ui-btn, &gt; .ui-controlgroup-controls &gt; .ui-checkbox, &gt; .ui-controlgroup-controls &gt; .ui-radio&quot;<\/code>\n<\/div>\n<div>Provides the list of children which will be processed during filtering. If no children result from examination of the value of this option, then the children of the element from which this filterable widget is constructed will be used.\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-children=&quot;.my-children&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Multiple types supported:<\/strong><ul>\n<li>\n<strong>String<\/strong>: A jQuery selector that will be used to select from the children of the element.<\/li>\n<li>\n<strong>jQuery<\/strong>: A jQuery object containing the list of elements to filter.<\/li>\n<li>\n<strong>Function<\/strong>: A function that returns a jQuery object containing the list of elements to filter. It will be called with no arguments whenever filtering needs to be performed.<\/li>\n<li>\n<strong>Element<\/strong>: A DOM element. This is a trivial application of the filter.<\/li>\n<\/ul>\n<strong>Code examples:<\/strong><p>Initialize the filterable with the <code>children<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">children<\/span>: <span class=\"hljs-string\">&quot;.my-children&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>children<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> children = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;children&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;children&quot;<\/span>, <span class=\"hljs-string\">&quot;.my-children&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-defaults\" class=\"api-item\">\n<h3>defaults&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>false<\/code>\n<\/div>\n<div>\n\t\tSeting this option to <code>true<\/code> indicates that other widgets options have default values and causes jQuery Mobile&apos;s widget autoenhancement code to omit the step where it retrieves option values from data attributes. This can improve startup time.\n\t\t<p>This option is also exposed as a data attribute: <code>data-defaults=&quot;true&quot;<\/code>.<\/p>\n\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the filterable with the <code>defaults<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">defaults<\/span>: <span class=\"hljs-literal\">true<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>defaults<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> defaults = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;defaults&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;defaults&quot;<\/span>, <span class=\"hljs-literal\">true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-disabled\" class=\"api-item\">\n<h3>disabled&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>false<\/code>\n<\/div>\n<div>\n\t\tDisables the filterable if set to <code>true<\/code>.\n\t\t<p>This option is also exposed as a data attribute: <code>data-disabled=&quot;true&quot;<\/code>.<\/p>\n\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the filterable with the <code>disabled<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">disabled<\/span>: <span class=\"hljs-literal\">true<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>disabled<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> disabled = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;disabled&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;disabled&quot;<\/span>, <span class=\"hljs-literal\">true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-enhanced\" class=\"api-item\">\n<h3>enhanced&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>false<\/code>\n<\/div>\n<div>Indicates that the markup necessary for a filterable widget has been provided as part of the original markup.\n\t\t<p>This option is also exposed as a data attribute: <code>data-enhanced=&quot;true&quot;<\/code>.<\/p>\n\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the filterable with the <code>enhanced<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">enhanced<\/span>: <span class=\"hljs-literal\">true<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>enhanced<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> enhanced = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;enhanced&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;enhanced&quot;<\/span>, <span class=\"hljs-literal\">true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-filterCallback\" class=\"api-item\">\n<h3>filterCallback&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>( <a href=\"http:\/\/api.jquery.com\/Types\/#Number\">Number<\/a> index, <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a> searchValue )<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>default callback<\/code>\n<\/div>\n<div>\n\t\t\t\tA function that will be called to determine whether an element in the list of children is considered to be filtered. It must return <code>true<\/code> if the element is to be filtered, and it must return <code>false<\/code> if the element is to be shown. The function is called once for each of the DOM elements and its context is set to the DOM element for which a decision is needed. Thus, the keyword <code>this<\/code> refers to the DOM element for which it must be decided whether it should be shown.\n\t\t\t<p>The default value of this attribute is a function that will examine each child for the presence of the <code>data-filtertext<\/code> attribute. If such an attribute is found, the function returns <code>true<\/code> if the string contained in the function&apos;s <code>searchValue<\/code> parameter cannot be found inside the value of the <code>data-filtertext<\/code> attribute. If no such attribute is found, the text content of the child is searched for the presence of the value of the function&apos;s <code>searchValue<\/code> parameter, and the function returns <code>true<\/code> if the search fails.<\/p>\n\t\t\t<p>For backwards compatibility with the jQuery Mobile 1.3 listview filter extension, the function provided as the default value of this attribute will never hide listview dividers, however, <strong>this behavior is deprecated as of jQuery Mobile 1.4.0 and will be removed in jQuery Mobile 1.5.0.<\/strong><\/p>\n\t\t\t<p>You can provide a <a href=\"#custom-filter-example\">custom callback<\/a> if you need to process the children in special ways.<\/p>\n\t\t\t<\/div>\n<\/div>\n<div id=\"option-filterPlaceholder\" class=\"api-item\">\n<h3>filterPlaceholder&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>&quot;Filter items...&quot;<\/code>\n<\/div>\n<div>\n\t\t\t\t<strong>This option is deprecated in 1.4.0 and will be removed in 1.5.0.<\/strong>\n\t\t\t\t<p>A string that will be used as the value of the <code>placeholder<\/code> attribute for the generated text input.<\/p>\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-filter-placeholder=&quot;Refine options...&quot;<\/code>.<\/p>\n\t\t\t<span class=\"version-details\"> (version deprecated: 1.4.0)<\/span>\n<\/div>\n<strong>Code examples:<\/strong><p>Initialize the filterable with the <code>filterPlaceholder<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">filterPlaceholder<\/span>: <span class=\"hljs-string\">&quot;Refine options...&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>filterPlaceholder<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> filterPlaceholder = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;filterPlaceholder&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;filterPlaceholder&quot;<\/span>, <span class=\"hljs-string\">&quot;Refine options...&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-filterReveal\" class=\"api-item\">\n<h3>filterReveal&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#Boolean\">Boolean<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>false<\/code>\n<\/div>\n<div>When set to <code>true<\/code> all children are hidden whenever the search string is empty.\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-filter-reveal=&quot;true&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Code examples:<\/strong><p>Initialize the filterable with the <code>filterReveal<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">filterReveal<\/span>: <span class=\"hljs-literal\">true<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>filterReveal<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> filterReveal = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;filterReveal&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;filterReveal&quot;<\/span>, <span class=\"hljs-literal\">true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-filterTheme\" class=\"api-item\">\n<h3>filterTheme&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>null, inherited from parent<\/code>\n<\/div>\n<div>\n\t\t\t\t<strong>This option is deprecated in 1.4.0 and will be removed in 1.5.0.<\/strong>\n\t\t\t\t<p>Sets the color scheme (swatch) for the generated text input. It accepts a single letter from a-z that maps to the swatches included in your theme.<\/p>\n\t\t\t\t<p>Possible values: swatch letter (a-z).<\/p>\n\t\t\t\t<p>If a <a href=\"\/1.4\/collapsibleset\/\">collapsibleset<\/a>, <a href=\"\/1.4\/select\/\">selectmenu<\/a>, <a href=\"\/1.4\/controlgroup\/\">controlgroup<\/a>, or <a href=\"\/1.4\/listview\/\">listview<\/a> widget is instantiated on the element and its options are being synchronized with the options of the generated text input, then the value of this option, if set, takes precedence overe the value of the <code>theme<\/code> option retrieved from the the widget.<\/p>\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-filter-theme=&quot;b&quot;<\/code>.<\/p>\n\t\t\t<span class=\"version-details\"> (version deprecated: 1.4.0)<\/span>\n<\/div>\n<strong>Code examples:<\/strong><p>Initialize the filterable with the <code>filterTheme<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">filterTheme<\/span>: b<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>filterTheme<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> filterTheme = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;filterTheme&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;filterTheme&quot;<\/span>, b );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div id=\"option-input\" class=\"api-item\">\n<h3>input&#xA0;\n\t\t\t\t\t<\/h3>\n<div class=\"option-type\">\n<strong>Type: <\/strong><a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a> or <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> or <a href=\"http:\/\/api.jquery.com\/Types\/#Element\">Element<\/a>\n<\/div>\n<div class=\"default\">\n<strong>Default: <\/strong><code>null<\/code>\n<\/div>\n<div>Provides the element that will serve as the input source for search strings.\n\t\t\t\t<p>This option is also exposed as a data attribute: <code>data-input=&quot;#input-for-filterable&quot;<\/code>.<\/p>\n\t\t\t<\/div>\n<strong>Multiple types supported:<\/strong><ul>\n<li>\n<strong>String<\/strong>: A jQuery selector that will be used to retrieve the element that will serve as the input source.<\/li>\n<li>\n<strong>jQuery<\/strong>: A jQuery object containing the element that will serve as the input source.<\/li>\n<li>\n<strong>Element<\/strong>: The element that will serve as the input source.<\/li>\n<\/ul>\n<strong>Code examples:<\/strong><p>Initialize the filterable with the <code>input<\/code> option specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">input<\/span>: <span class=\"hljs-string\">&quot;#input-for-filterable&quot;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Get or set the <code>input<\/code> option, after initialization:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Getter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> input = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;input&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Setter<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;input&quot;<\/span>, <span class=\"hljs-string\">&quot;#input-for-filterable&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div><\/section><section id=\"methods\"><header><h2>Methods<\/h2><\/header><div id=\"method-destroy\"><div class=\"api-item first-item\">\n<h3>destroy()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>\n\t\tRemoves the filterable functionality completely. This will return the element back to its pre-init state.\n\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the destroy method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;destroy&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n<div id=\"method-disable\"><div class=\"api-item\">\n<h3>disable()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>\n\t\tDisables the filterable.\n\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the disable method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;disable&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n<div id=\"method-enable\"><div class=\"api-item\">\n<h3>enable()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>\n\t\tEnables the filterable.\n\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the enable method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;enable&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div>\n<div id=\"method-option\">\n<div class=\"api-item\">\n<h3>option( optionName )<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a><\/span>\n<\/h3>\n<div>Gets the value currently associated with the specified <code>optionName<\/code>.<\/div>\n<ul><li>\n<div><strong>optionName<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The name of the option to get.<\/div>\n<\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the  method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> isDisabled = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;disabled&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div class=\"api-item\">\n<h3>option()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#PlainObject\">PlainObject<\/a><\/span>\n<\/h3>\n<div>Gets an object containing key\/value pairs representing the current filterable options hash.<\/div>\n<ul><li><div class=\"null-signature\">This signature does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the  method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> options = $( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div class=\"api-item\">\n<h3>option( optionName, value )<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>Sets the value of the filterable option associated with the specified <code>optionName<\/code>.<\/div>\n<ul>\n<li>\n<div><strong>optionName<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The name of the option to set.<\/div>\n<\/li>\n<li>\n<div><strong>value<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div>A value to set for the option.<\/div>\n<\/li>\n<\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the  method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, <span class=\"hljs-string\">&quot;disabled&quot;<\/span>, <span class=\"hljs-literal\">true<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div class=\"api-item\">\n<h3>option( options )<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>Sets one or more options for the filterable.<\/div>\n<ul><li>\n<div><strong>options<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div>A map of option-value pairs to set.<\/div>\n<\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the  method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;option&quot;<\/span>, { <span class=\"hljs-attr\">disabled<\/span>: <span class=\"hljs-literal\">true<\/span> } );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<\/div>\n<div id=\"method-refresh\"><div class=\"api-item\">\n<h3>refresh()<span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a> (<a href=\"http:\/\/learn.jquery.com\/jquery-ui\/widget-factory\/widget-method-invocation\/\">plugin only<\/a>)<\/span>\n<\/h3>\n<div>Updates the filterable widget.\n\t\t\t\t<p>If you manipulate a filterable widget via JavaScript (e.g. by adding new children or removing old ones), you must call the <code>refresh()<\/code> method on it to update the visual styling.<\/p>\n\t\t\t<\/div>\n<ul><li><div class=\"null-signature\">This method does not accept any arguments.<\/div><\/li><\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Invoke the refresh method:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable( <span class=\"hljs-string\">&quot;refresh&quot;<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/div><\/section><section id=\"events\"><header><h2>Events<\/h2><\/header><div id=\"event-beforefilter\" class=\"api-item first-item\">\n<h3>beforefilter( event )<span class=\"returns\">Type: <code>filterablebeforefilter<\/code><\/span>\n<\/h3>\n<div>Triggered before the widget begins filtering the list of children.<\/div>\n<ul><li>\n<div><strong>event<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a>\n<\/div>\n<div><\/div>\n<\/li><\/ul>\n<p><em>Note: The <code>ui<\/code> object is empty but included for consistency with other events.<\/em><\/p>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the filterable with the beforefilter callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">beforefilter<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the filterablebeforefilter event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;filterablebeforefilter&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div id=\"event-create\" class=\"api-item\">\n<h3>create( event, ui )<span class=\"returns\">Type: <code>filterablecreate<\/code><\/span>\n<\/h3>\n<div>\n\t\tTriggered when the filterable is created.\n\t<\/div>\n<ul>\n<li>\n<div><strong>event<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<li>\n<div><strong>ui<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<\/ul>\n<p><em>Note: The <code>ui<\/code> object is empty but included for consistency with other events.<\/em><\/p>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the filterable with the create callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">create<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the filterablecreate event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;filterablecreate&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div>\n<div id=\"event-filter\" class=\"api-item\">\n<h3>filter( event, ui )<span class=\"returns\">Type: <code>filterablefilter<\/code><\/span>\n<\/h3>\n<div>Triggered after the widget has performed the filtering on the list of children. The <code>ui<\/code> parameter contains the list of children that was processed.<\/div>\n<ul>\n<li>\n<div><strong>event<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Event\">Event<\/a>\n<\/div>\n<div><\/div>\n<\/li>\n<li>\n<div><strong>ui<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Object\">Object<\/a>\n<\/div>\n<div><\/div>\n<ul><li>\n<div><strong>items<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a>\n<\/div>\n<div>A jQuery collection object containing the items over which the filter has iterated.<\/div>\n<\/li><\/ul>\n<\/li>\n<\/ul>\n<div>\n<strong>Code examples:<\/strong><p>Initialize the filterable with the filter callback specified:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).filterable({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">filter<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{}<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<p>Bind an event listener to the filterablefilter event:<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;.selector&quot;<\/span> ).on( <span class=\"hljs-string\">&quot;filterablefilter&quot;<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event, ui <\/span>) <\/span>{} );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Makes the children of an element filterable.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-32","post","type-post","status-publish","format-standard","hentry","category-widgets"],"_links":{"self":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":1,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts\/32\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/posts\/32\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/media?parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/categories?post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquerymobile.com\/1.4\/wp-json\/wp\/v2\/tags?post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}