Skip to content
This repository was archived by the owner on Oct 8, 2021. It is now read-only.

Commit 2e61ffd

Browse files
author
Gabriel Schulhof
committed
Selectmenu: Filterable demo now filters/refreshes selectmenu widget
Fixes gh-7677
1 parent f02420e commit 2e61ffd

File tree

1 file changed

+64
-31
lines changed

1 file changed

+64
-31
lines changed

demos/selectmenu-custom-filter/index.php

Lines changed: 64 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,13 @@
1414
<script>
1515
$.mobile.document
1616

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 ) {
2121
var input,
22-
list = $( event.target ),
22+
selectmenu = $( event.target ),
23+
list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
2324
form = list.jqmData( "filter-form" );
2425

2526
// We store the generated form in a variable attached to the popup so we avoid creating a
@@ -36,12 +37,19 @@
3637
form.jqmData( "listview", list );
3738
}
3839

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+
});
4553
})
4654

4755
// The custom select list may show up as either a popup or a dialog, depending on how much
@@ -52,7 +60,9 @@
5260
var listview, form,
5361
id = data.toPage && data.toPage.attr( "id" );
5462

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" ) ) {
5666
return;
5767
}
5868

@@ -71,13 +81,15 @@
7181
// After the dialog is closed, the form containing the filter input is returned to the popup.
7282
.on( "pagecontainerhide", function( event, data ) {
7383
var listview, form,
74-
id = data.toPage && data.toPage.attr( "id" );
84+
id = data.prevPage && data.prevPage.attr( "id" );
7585

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" ) ) {
7789
return;
7890
}
7991

80-
listview = data.toPage.jqmData( "listview" ),
92+
listview = data.prevPage.jqmData( "listview" ),
8193
form = listview.jqmData( "filter-form" );
8294

8395
// Put the form back in the popup. It goes ahead of the listview.
@@ -120,33 +132,54 @@
120132
<h1>Filterable inside custom select</h1>
121133

122134
<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.
124136
</p>
125137

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

128142
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
129143
<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>
136153
</form>
137154
</div>
138155

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

141171
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
142172
<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>
150183
</form>
151184
</div>
152185

0 commit comments

Comments
 (0)