|
14 | 14 | <script>
|
15 | 15 | $.mobile.document
|
16 | 16 |
|
17 |
| - // The custom selectmenu plugin generates an ID for the listview by suffixing the ID of the |
18 |
| - // native widget with "-menu". Upon creation of the listview widget we want to place an |
19 |
| - // input field before the list to be used for a filter. |
20 |
| - .on( "listviewcreate", "#filter-menu-menu,#title-filter-menu-menu", function( event ) { |
| 17 | + // Upon creation of the select menu, we want to make use of the fact that the ID of the |
| 18 | + // listview it generates starts with the ID of the select menu itself, plus the suffix "-menu". |
| 19 | + // We retrieve the listview and insert a search input before it. |
| 20 | + .on( "selectmenucreate", "#filter-menu,#title-filter-menu,#filtertext", function( event ) { |
21 | 21 | var input,
|
22 |
| - list = $( event.target ), |
| 22 | + selectmenu = $( event.target ), |
| 23 | + list = $( "#" + selectmenu.attr( "id" ) + "-menu" ), |
23 | 24 | form = list.jqmData( "filter-form" );
|
24 | 25 |
|
25 | 26 | // We store the generated form in a variable attached to the popup so we avoid creating a
|
|
36 | 37 | form.jqmData( "listview", list );
|
37 | 38 | }
|
38 | 39 |
|
39 |
| - // Instantiate a filterable widget on the newly created listview and indicate that the |
40 |
| - // generated input form element is to be used for the filtering. |
41 |
| - list.filterable({ |
42 |
| - input: input, |
43 |
| - children: "> li:not(:jqmData(placeholder='true'))" |
44 |
| - }); |
| 40 | + // Instantiate a filterable widget on the newly created selectmenu widget and indicate that |
| 41 | + // the generated input form element is to be used for the filtering. |
| 42 | + selectmenu |
| 43 | + .filterable({ |
| 44 | + input: input, |
| 45 | + children: "> option[value]" |
| 46 | + }) |
| 47 | + |
| 48 | + // Rebuild the custom select menu's list items to reflect the results of the filtering |
| 49 | + // done on the select menu. |
| 50 | + .on( "filterablefilter", function() { |
| 51 | + selectmenu.selectmenu( "refresh" ); |
| 52 | + }); |
45 | 53 | })
|
46 | 54 |
|
47 | 55 | // The custom select list may show up as either a popup or a dialog, depending on how much
|
|
52 | 60 | var listview, form,
|
53 | 61 | id = data.toPage && data.toPage.attr( "id" );
|
54 | 62 |
|
55 |
| - if ( !( id === "filter-menu-dialog" || id === "title-filter-menu-dialog" ) ) { |
| 63 | + if ( !( id === "filter-menu-dialog" || |
| 64 | + id === "title-filter-menu-dialog" || |
| 65 | + id === "filtertext-dialog" ) ) { |
56 | 66 | return;
|
57 | 67 | }
|
58 | 68 |
|
|
71 | 81 | // After the dialog is closed, the form containing the filter input is returned to the popup.
|
72 | 82 | .on( "pagecontainerhide", function( event, data ) {
|
73 | 83 | var listview, form,
|
74 |
| - id = data.toPage && data.toPage.attr( "id" ); |
| 84 | + id = data.prevPage && data.prevPage.attr( "id" ); |
75 | 85 |
|
76 |
| - if ( !( id === "filter-menu-dialog" || id === "title-filter-menu-dialog" ) ) { |
| 86 | + if ( !( id === "filter-menu-dialog" || |
| 87 | + id === "title-filter-menu-dialog" || |
| 88 | + id === "filtertext-dialog" ) ) { |
77 | 89 | return;
|
78 | 90 | }
|
79 | 91 |
|
80 |
| - listview = data.toPage.jqmData( "listview" ), |
| 92 | + listview = data.prevPage.jqmData( "listview" ), |
81 | 93 | form = listview.jqmData( "filter-form" );
|
82 | 94 |
|
83 | 95 | // Put the form back in the popup. It goes ahead of the listview.
|
|
120 | 132 | <h1>Filterable inside custom select</h1>
|
121 | 133 |
|
122 | 134 | <p>
|
123 |
| - This examples shows how you can filter the list inside a custom select menu. |
| 135 | + These examples show how you can filter the list inside a custom select menu. |
124 | 136 | </p>
|
125 | 137 |
|
126 |
| - <p>You can create an input field and prepend it to the popup and/or the dialog used by the custom select menu list and you can use it to filter items inside the list by instantiating a filterable widget on the list.</p> |
| 138 | + <p>You can create an input field and prepend it to the popup and/or the dialog used by the custom select menu list and you can use it to filter items inside the list by instantiating a filterable widget on the select menu.</p> |
| 139 | + |
| 140 | + <h2>Examples</h2> |
127 | 141 |
|
128 | 142 | <div data-demo-html="true" data-demo-js="true" data-demo-css="true">
|
129 | 143 | <form>
|
130 |
| - <select id="filter-menu" data-native-menu="false"> |
131 |
| - <option value="SFO">San Francisco</option> |
132 |
| - <option value="LAX">Los Angeles</option> |
133 |
| - <option value="YVR">Vancouver</option> |
134 |
| - <option value="YYZ">Toronto</option> |
135 |
| - </select> |
| 144 | + <div class="ui-field-contain"> |
| 145 | + <label for="filter-menu">Basic:</label> |
| 146 | + <select id="filter-menu" data-native-menu="false"> |
| 147 | + <option value="SFO">San Francisco</option> |
| 148 | + <option value="LAX">Los Angeles</option> |
| 149 | + <option value="YVR">Vancouver</option> |
| 150 | + <option value="YYZ">Toronto</option> |
| 151 | + </select> |
| 152 | + </div> |
136 | 153 | </form>
|
137 | 154 | </div>
|
138 | 155 |
|
139 |
| - <p>You can also handle custom menus with placeholder items:</p> |
| 156 | + <div data-demo-html="true" data-demo-js="true" data-demo-css="true"> |
| 157 | + <form> |
| 158 | + <div class="ui-field-contain"> |
| 159 | + <label for="title-filter-menu">Placeholder:</label> |
| 160 | + <select id="title-filter-menu" data-native-menu="false"> |
| 161 | + <option>Select fruit...</option> |
| 162 | + <option value="orange">Orange</option> |
| 163 | + <option value="apple">Apple</option> |
| 164 | + <option value="peach">Peach</option> |
| 165 | + <option value="lemon">Lemon</option> |
| 166 | + </select> |
| 167 | + </div> |
| 168 | + </form> |
| 169 | + </div> |
140 | 170 |
|
141 | 171 | <div data-demo-html="true" data-demo-js="true" data-demo-css="true">
|
142 | 172 | <form>
|
143 |
| - <select id="title-filter-menu" data-native-menu="false"> |
144 |
| - <option>Select fruit...</option> |
145 |
| - <option value="orange">Orange</option> |
146 |
| - <option value="apple">Apple</option> |
147 |
| - <option value="peach">Peach</option> |
148 |
| - <option value="lemon">Lemon</option> |
149 |
| - </select> |
| 173 | + <div class="ui-field-contain"> |
| 174 | + <label for="filtertext">Filter text:</label> |
| 175 | + <select id="filtertext" data-native-menu="false"> |
| 176 | + <option>Select fruit...</option> |
| 177 | + <option value="orange" data-filtertext="Florida">Orange</option> |
| 178 | + <option value="apple">Apple</option> |
| 179 | + <option value="peach">Peach</option> |
| 180 | + <option value="lemon">Lemon</option> |
| 181 | + </select> |
| 182 | + </div> |
150 | 183 | </form>
|
151 | 184 | </div>
|
152 | 185 |
|
|
0 commit comments