|
| 1 | +<!DOCTYPE html> |
| 2 | +<html> |
| 3 | +<head> |
| 4 | + <meta charset="utf-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | + <title>Filterable inside custom select - jQuery Mobile Demos</title> |
| 7 | + <link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"> |
| 8 | + <link rel="stylesheet" href="../../_assets/css/jqm-demos.css"> |
| 9 | + <link rel="shortcut icon" href="../../favicon.ico"> |
| 10 | + <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700"> |
| 11 | + <script src="../../../js/jquery.js"></script> |
| 12 | + <script src="../../_assets/js/"></script> |
| 13 | + <script src="../../../js/"></script> |
| 14 | + <script> |
| 15 | + $.mobile.document |
| 16 | + |
| 17 | + // "filter-menu-menu" is the ID generated for the listview when it is created |
| 18 | + // by the custom selectmenu plugin. Upon creation of the listview widget we |
| 19 | + // want to prepend an input field to the list to be used for a filter. |
| 20 | + .on( "listviewcreate", "#filter-menu-menu", function( e ) { |
| 21 | + var input, |
| 22 | + listbox = $( "#filter-menu-listbox" ), |
| 23 | + form = listbox.jqmData( "filter-form" ), |
| 24 | + listview = $( e.target ); |
| 25 | + |
| 26 | + // We store the generated form in a variable attached to the popup so we |
| 27 | + // avoid creating a second form/input field when the listview is |
| 28 | + // destroyed/rebuilt during a refresh. |
| 29 | + if ( !form ) { |
| 30 | + input = $( "<input data-type='search'></input>" ); |
| 31 | + form = $( "<form></form>" ).append( input ); |
| 32 | + |
| 33 | + input.textinput(); |
| 34 | + |
| 35 | + $( "#filter-menu-listbox" ) |
| 36 | + .prepend( form ) |
| 37 | + .jqmData( "filter-form", form ); |
| 38 | + } |
| 39 | + |
| 40 | + // Instantiate a filterable widget on the newly created listview and |
| 41 | + // indicate that the generated input is to be used for the filtering. |
| 42 | + listview.filterable({ input: input }); |
| 43 | + }) |
| 44 | + |
| 45 | + // The custom select list may show up as either a popup or a dialog, |
| 46 | + // depending how much vertical room there is on the screen. If it shows up |
| 47 | + // as a dialog, then the form containing the filter input field must be |
| 48 | + // transferred to the dialog so that the user can continue to use it for |
| 49 | + // filtering list items. |
| 50 | + // |
| 51 | + // After the dialog is closed, the form containing the filter input is |
| 52 | + // transferred back into the popup. |
| 53 | + .on( "pagebeforeshow pagehide", "#filter-menu-dialog", function( e ) { |
| 54 | + var form = $( "#filter-menu-listbox" ).jqmData( "filter-form" ), |
| 55 | + placeInDialog = ( e.type === "pagebeforeshow" ), |
| 56 | + destination = placeInDialog ? $( e.target ).find( ".ui-content" ) : $( "#filter-menu-listbox" ); |
| 57 | + |
| 58 | + form |
| 59 | + .find( "input" ) |
| 60 | + |
| 61 | + // Turn off the "inset" option when the filter input is inside a dialog |
| 62 | + // and turn it back on when it is placed back inside the popup, because |
| 63 | + // it looks better that way. |
| 64 | + .textinput( "option", "inset", !placeInDialog ) |
| 65 | + .end() |
| 66 | + .prependTo( destination ); |
| 67 | + }); |
| 68 | + </script> |
| 69 | +</head> |
| 70 | +<body> |
| 71 | +<div data-role="page"> |
| 72 | + |
| 73 | + <div data-role="header" class="jqm-header"> |
| 74 | + <h1 class="jqm-logo"><a href="../../"><img src="../../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1> |
| 75 | + <a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a> |
| 76 | + <a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a> |
| 77 | + <?php include( '../../search.php' ); ?> |
| 78 | + </div><!-- /header --> |
| 79 | + |
| 80 | + <div data-role="content" class="jqm-content"> |
| 81 | + |
| 82 | + <h1>Filterable inside custom select</h1> |
| 83 | + |
| 84 | + <p class="jqm-intro"> |
| 85 | + This examples shows how you can filter the list inside a custom select menu. |
| 86 | + </p> |
| 87 | + |
| 88 | + <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> |
| 89 | + |
| 90 | + <div data-demo-html="true" data-demo-js="true"> |
| 91 | + <form> |
| 92 | + <select id="filter-menu" data-native-menu="false"> |
| 93 | + <option value="SFO">San Francisco</option> |
| 94 | + <option value="LAX">Los Angeles</option> |
| 95 | + <option value="YVR">Vancouver</option> |
| 96 | + <option value="YYZ">Toronto</option> |
| 97 | + </select> |
| 98 | + </form> |
| 99 | + </div> |
| 100 | + |
| 101 | + </div><!-- /content --> |
| 102 | + |
| 103 | + <div data-role="footer" class="jqm-footer"> |
| 104 | + <p class="jqm-version"></p> |
| 105 | + <p>Copyright 2013 The jQuery Foundation</p> |
| 106 | + </div><!-- /footer --> |
| 107 | + |
| 108 | +<?php include( '../../global-nav.php' ); ?> |
| 109 | + |
| 110 | +</div><!-- /page --> |
| 111 | +</body> |
| 112 | +</html> |
0 commit comments