Permalink
Browse files

Selectmenu: Filterable demo now filters/refreshes selectmenu widget

(cherry picked from commit 75e1823)

Closes gh-7681
Fixes gh-7677
  • Loading branch information...
1 parent edcdd51 commit a7a5a40f06f118e6fbc19ea0234cd1fdf51b6381 @gabrielschulhof gabrielschulhof committed Sep 18, 2014
Showing with 141 additions and 34 deletions.
  1. +141 −34 demos/selectmenu-custom-filter/index.php
@@ -12,14 +12,31 @@
<script src="../_assets/js/"></script>
<script src="../../js/"></script>
<script>
+( function( $ ) {
+
+function pageIsSelectmenuDialog( page ) {
+ var isDialog = false,
+ id = page && page.attr( "id" );
+
+ $( ".filterable-select" ).each( function() {
+ if ( $( this ).attr( "id" ) + "-dialog" === id ) {
+ isDialog = true;
+ return false;
+ }
+ });
+
+ return isDialog;
+}
+
$.mobile.document
- // The custom selectmenu plugin generates an ID for the listview by suffixing the ID of the
- // native widget with "-menu". Upon creation of the listview widget we want to place an
- // input field before the list to be used for a filter.
- .on( "listviewcreate", "#filter-menu-menu,#title-filter-menu-menu", function( event ) {
+ // Upon creation of the select menu, we want to make use of the fact that the ID of the
+ // listview it generates starts with the ID of the select menu itself, plus the suffix "-menu".
+ // We retrieve the listview and insert a search input before it.
+ .on( "selectmenucreate", ".filterable-select", function( event ) {
var input,
- list = $( event.target ),
+ selectmenu = $( event.target ),
+ list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
form = list.jqmData( "filter-form" );
// We store the generated form in a variable attached to the popup so we avoid creating a
@@ -36,23 +53,30 @@
form.jqmData( "listview", list );
}
- // Instantiate a filterable widget on the newly created listview and indicate that the
- // generated input form element is to be used for the filtering.
- list.filterable({
- input: input,
- children: "> li:not(:jqmData(placeholder='true'))"
- });
+ // Instantiate a filterable widget on the newly created selectmenu widget and indicate that
+ // the generated input form element is to be used for the filtering.
+ selectmenu
+ .filterable({
+ input: input,
+ children: "> option[value]"
+ })
+
+ // Rebuild the custom select menu's list items to reflect the results of the filtering
+ // done on the select menu.
+ .on( "filterablefilter", function() {
+ selectmenu.selectmenu( "refresh" );
+ });
})
// The custom select list may show up as either a popup or a dialog, depending on how much
// vertical room there is on the screen. If it shows up as a dialog, then the form containing
// the filter input field must be transferred to the dialog so that the user can continue to
// use it for filtering list items.
.on( "pagecontainerbeforeshow", function( event, data ) {
- var listview, form,
- id = data.toPage && data.toPage.attr( "id" );
+ var listview, form;
- if ( !( id === "filter-menu-dialog" || id === "title-filter-menu-dialog" ) ) {
+ // We only handle the appearance of a dialog generated by a filterable selectmenu
+ if ( !pageIsSelectmenuDialog( data.toPage ) ) {
return;
}
@@ -70,19 +94,21 @@
// After the dialog is closed, the form containing the filter input is returned to the popup.
.on( "pagecontainerhide", function( event, data ) {
- var listview, form,
- id = data.toPage && data.toPage.attr( "id" );
+ var listview, form;
- if ( !( id === "filter-menu-dialog" || id === "title-filter-menu-dialog" ) ) {
+ // We only handle the disappearance of a dialog generated by a filterable selectmenu
+ if ( !pageIsSelectmenuDialog( data.toPage ) ) {
return;
}
- listview = data.toPage.jqmData( "listview" ),
+ listview = data.prevPage.jqmData( "listview" ),
form = listview.jqmData( "filter-form" );
// Put the form back in the popup. It goes ahead of the listview.
listview.before( form );
});
+
+})( jQuery );
</script>
<style>
.ui-selectmenu.ui-popup .ui-input-search {
@@ -120,36 +146,117 @@
<h1>Filterable inside custom select</h1>
<p>
- This examples shows how you can filter the list inside a custom select menu.
+ These examples show how you can filter the list inside a custom select menu.
</p>
- <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>
+ <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>
+
+ <h2>Examples</h2>
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
<form>
- <select id="filter-menu" data-native-menu="false">
- <option value="SFO">San Francisco</option>
- <option value="LAX">Los Angeles</option>
- <option value="YVR">Vancouver</option>
- <option value="YYZ">Toronto</option>
- </select>
+ <div class="ui-field-contain">
+ <label for="filter-menu">Basic:</label>
+ <select id="filter-menu" data-native-menu="false" class="filterable-select">
+ <option value="SFO">San Francisco</option>
+ <option value="LAX">Los Angeles</option>
+ <option value="YVR">Vancouver</option>
+ <option value="YYZ">Toronto</option>
+ </select>
+ </div>
</form>
</div>
- <p>You can also handle custom menus with placeholder items:</p>
+ <div data-demo-html="true" data-demo-js="true" data-demo-css="true">
+ <form>
+ <div class="ui-field-contain">
+ <label for="title-filter-menu">Placeholder:</label>
+ <select id="title-filter-menu" data-native-menu="false" class="filterable-select">
+ <option>Select fruit...</option>
+ <option value="orange">Orange</option>
+ <option value="apple">Apple</option>
+ <option value="peach">Peach</option>
+ <option value="lemon">Lemon</option>
+ </select>
+ </div>
+ </form>
+ </div>
<div data-demo-html="true" data-demo-js="true" data-demo-css="true">
<form>
- <select id="title-filter-menu" data-native-menu="false">
- <option>Select fruit...</option>
- <option value="orange">Orange</option>
- <option value="apple">Apple</option>
- <option value="peach">Peach</option>
- <option value="lemon">Lemon</option>
- </select>
+ <div class="ui-field-contain">
+ <label for="filtertext">Filter text:</label>
+ <select id="filtertext" data-native-menu="false" class="filterable-select">
+ <option>Select fruit...</option>
+ <option value="orange" data-filtertext="Florida">Orange</option>
+ <option value="apple">Apple</option>
+ <option value="peach">Peach</option>
+ <option value="lemon">Lemon</option>
+ </select>
+ </div>
</form>
</div>
+ <div data-demo-html="true" data-demo-js="true" data-demo-css="true">
+ <form>
+ <div class="ui-field-contain">
+ <label for="select-custom-20">Long list:</label>
+ <select name="select-custom-20" id="select-custom-20" data-native-menu="false" class="filterable-select">
+ <option value="AL">Alabama</option>
+ <option value="AK">Alaska</option>
+ <option value="AZ">Arizona</option>
+ <option value="AR">Arkansas</option>
+ <option value="CA">California</option>
+ <option value="CO">Colorado</option>
+ <option value="CT">Connecticut</option>
+ <option value="DE">Delaware</option>
+ <option value="FL">Florida</option>
+ <option value="GA">Georgia</option>
+ <option value="HI">Hawaii</option>
+ <option value="ID">Idaho</option>
+ <option value="IL">Illinois</option>
+ <option value="IN">Indiana</option>
+ <option value="IA">Iowa</option>
+ <option value="KS">Kansas</option>
+ <option value="KY">Kentucky</option>
+ <option value="LA">Louisiana</option>
+ <option value="ME">Maine</option>
+ <option value="MD">Maryland</option>
+ <option value="MA">Massachusetts</option>
+ <option value="MI">Michigan</option>
+ <option value="MN">Minnesota</option>
+ <option value="MS">Mississippi</option>
+ <option value="MO">Missouri</option>
+ <option value="MT">Montana</option>
+ <option value="NE">Nebraska</option>
+ <option value="NV">Nevada</option>
+ <option value="NH">New Hampshire</option>
+ <option value="NJ">New Jersey</option>
+ <option value="NM">New Mexico</option>
+ <option value="NY">New York</option>
+ <option value="NC">North Carolina</option>
+ <option value="ND">North Dakota</option>
+ <option value="OH">Ohio</option>
+ <option value="OK">Oklahoma</option>
+ <option value="OR">Oregon</option>
+ <option value="PA">Pennsylvania</option>
+ <option value="RI">Rhode Island</option>
+ <option value="SC">South Carolina</option>
+ <option value="SD">South Dakota</option>
+ <option value="TN">Tennessee</option>
+ <option value="TX">Texas</option>
+ <option value="UT">Utah</option>
+ <option value="VT">Vermont</option>
+ <option value="VA">Virginia</option>
+ <option value="WA">Washington</option>
+ <option value="WV">West Virginia</option>
+ <option value="WI">Wisconsin</option>
+ <option value="WY">Wyoming</option>
+ </select>
+ </div>
+ </form>
+ </div><!--/demo-html -->
+
</div><!-- /content -->
<?php include( '../jqm-navmenu.php' ); ?>

0 comments on commit a7a5a40

Please sign in to comment.