Selectmenu: Add demo sporting placeholder

Closes gh-7398
Fixes gh-7396

Author: Gabriel Schulhof

demos/selectmenu-custom-filter/index.php

@@ -12,59 +12,64 @@
 	<script src="../_assets/js/"></script>
 	<script src="../../js/"></script>
 	<script>
-	$.mobile.document
-
-		// "filter-menu-menu" is the ID generated for the listview when it is created
-		// by the custom selectmenu plugin. Upon creation of the listview widget we
-		// want to prepend an input field to the list to be used for a filter.
-		.on( "listviewcreate", "#filter-menu-menu", function( e ) {
-			var input,
-				listbox = $( "#filter-menu-listbox" ),
-				form = listbox.jqmData( "filter-form" ),
-				listview = $( e.target );
-
-			// We store the generated form in a variable attached to the popup so we
-			// avoid creating a second form/input field when the listview is
-			// destroyed/rebuilt during a refresh.
-			if ( !form ) {
-				input = $( "<input data-type='search'></input>" );
-				form = $( "<form></form>" ).append( input );
-
-				input.textinput();
-
-				$( "#filter-menu-listbox" )
-					.prepend( form )
-					.jqmData( "filter-form", form );
-			}
-
-			// Instantiate a filterable widget on the newly created listview and
-			// indicate that the generated input is to be used for the filtering.
-			listview.filterable({ input: input });
-		})
-
-		// The custom select list may show up as either a popup or a dialog,
-		// depending 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.
-		//
-		// After the dialog is closed, the form containing the filter input is
-		// transferred back into the popup.
-		.on( "pagebeforeshow pagehide", "#filter-menu-dialog", function( e ) {
-			var form = $( "#filter-menu-listbox" ).jqmData( "filter-form" ),
-				placeInDialog = ( e.type === "pagebeforeshow" ),
-				destination = placeInDialog ? $( e.target ).find( ".ui-content" ) : $( "#filter-menu-listbox" );
-
-			form
-				.find( "input" )
-
-				// Turn off the "inset" option when the filter input is inside a dialog
-				// and turn it back on when it is placed back inside the popup, because
-				// it looks better that way.
-				.textinput( "option", "inset", !placeInDialog )
-				.end()
-				.prependTo( destination );
+$.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 ) {
+		var input,
+			list = $( event.target )
+			form = list.jqmData( "filter-form" );
+
+		// We store the generated form in a variable attached to the popup so we avoid creating a
+		// second form/input field when the listview is destroyed/rebuilt during a refresh.
+		if ( !form ) {
+			input = $( "<input data-type='search'></input>" );
+			form = $( "<form></form>" ).append( input );
+
+			input.textinput();
+
+			list
+				.before( form )
+				.jqmData( "filter-form", form )	;
+			form.jqmData( "listview", list );
+		}
+
+		// Instantiate a filterable widget on the newly created listview and indicate that the
+		// generated input is to be used for the filtering.
+		list.filterable({
+			input: input,
+			children: "> li:not(:jqmData(placeholder='true'))"
 		});
+	})
+
+	// The custom select list may show up as either a popup or a dialog, depending 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( "pagebeforeshow", "#filter-menu-dialog,#title-filter-menu-dialog", function( event ) {
+		var dialog = $( event.target )
+			listview = dialog.find( "ul" ),
+			form = listview.jqmData( "filter-form" );
+
+		// Attach a reference to the listview as a data item to the dialog, because during the
+		// pagehide handler below the selectmenu widget will already have returned the listview
+		// to the popup, so we won't be able to find it inside the dialog with a selector.
+		dialog.jqmData( "listview", listview );
+
+		// Place the form before the listview in the dialog.
+		listview.before( form );
+	})
+
+	// After the dialog is closed, the form containing the filter input is returned to the popup.
+	.on( "pagehide", "#filter-menu-dialog,#title-filter-menu-dialog", function( event ) {
+		var listview = $( event.target ).jqmData( "listview" ),
+			form = listview.jqmData( "filter-form" );
+
+		// Put the form back in the popup. It goes ahead of the listview.
+		listview.before( form );
+	});
 	</script>
 	<style>
 		.ui-selectmenu.ui-popup .ui-input-search {
@@ -118,6 +123,20 @@
 			</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>
+				<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>
+			</form>
+		</div>
+
 	</div><!-- /content -->
 
 	<?php include( '../jqm-navmenu.php' ); ?>