Browse files

Demos: Add example showing a filterable/input inside a custom select …

…popup/dialog. Fixes #6282.
  • Loading branch information...
gabrielschulhof committed Aug 12, 2013
1 parent c15eb08 commit 391714b2ec2f16fc2a0df00127f06f4ae2c3adbd
Showing with 115 additions and 4 deletions.
  1. +112 −0 demos/examples/filterable/filter-inside-selectmenu.php
  2. +3 −4 demos/nav-examples.php
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Filterable inside custom select - jQuery Mobile Demos</title>
<link rel="stylesheet" href="../../../css/themes/default/">
<link rel="stylesheet" href="../../_assets/css/jqm-demos.css">
<link rel="shortcut icon" href="../../favicon.ico">
<link rel="stylesheet" href=",400,700">
<script src="../../../js/jquery.js"></script>
<script src="../../_assets/js/"></script>
<script src="../../../js/"></script>
// "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 = $( );
// 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 );
$( "#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 ? $( ).find( ".ui-content" ) : $( "#filter-menu-listbox" );
.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 )
.prependTo( destination );
<div data-role="page">
<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>
<?php include( '../../search.php' ); ?>
</div><!-- /header -->
<div data-role="content" class="jqm-content">
<h1>Filterable inside custom select</h1>
<p class="jqm-intro">
This examples shows how you can filter the list inside a custom select menu.
<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>
<div data-demo-html="true" data-demo-js="true">
<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>
</div><!-- /content -->
<div data-role="footer" class="jqm-footer">
<p class="jqm-version"></p>
<p>Copyright 2013 The jQuery Foundation</p>
</div><!-- /footer -->
<?php include( '../../global-nav.php' ); ?>
</div><!-- /page -->
@@ -6,11 +6,10 @@
<li data-section="Demo Showcase" data-filtertext="dynamic controlgroup buttons selects checkboxes forms"><a href="examples/controlgroups/dynamic-controlgroup.php" data-ajax="false">Dynamic controlgroup</a></li>
<li data-role="list-divider">Filter</li>
<li data-role="list-divider">Filterable</li>
<li data-section="Demo Showcase" data-filtertext="select filter popup dialog"><a href="examples/filterable/filter-inside-selectmenu.php" data-ajax="false">Filterable inside custom select</a></li>
<li data-section="Demo Showcase" data-filtertext="running a custom filter query on local and remote storages"><a href="examples/filterable/server-side-filter.php" data-ajax="false">Local/remote storage Filter</a></li>
<li data-role="list-divider">Listviews</li>
<li data-section="Demo Showcase" data-filtertext="grid listview responsive grids responsive listviews lists ul"><a href="examples/listviews/grid-listview.php" data-ajax="false">Grid Listview</a></li>

0 comments on commit 391714b

Please sign in to comment.