Long List Filterable Selectmenu

Description

This filterable selectmenu displays the long list for custom filterable select menu when there is more number of list available.

Example

Following example demonstrates the use of long list filterable selectmenu in the jQuery Mobile.

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <style>
         .ui-selectmenu.ui-popup {
            margin-left: .5em;
            margin-right: .5em;
         }
         
         .ui-input-search {
            margin: 2em;
         }
         
         .ui-selectmenu.ui-dialog .ui-content {
            padding-top: 0;
         }
         
         .ui-selectmenu.ui-dialog .ui-selectmenu-list {
            margin-top: 0;
         }
         
         .ui-selectmenu.ui-popup .ui-selectmenu-list li.ui-first-child .ui-btn {
            border-top-width: 1px;
            -webkit-border-radius: 0;
            border-radius: 0;
         }
         
         .ui-selectmenu.ui-dialog .ui-header {
            border-bottom-width: 1px;
         }
      </style>
      
      <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
            .on( "selectmenucreate", ".filterable-select", function( event ) {
               var input,
               selectmenu = $( event.target ),
               list = $( "#" + selectmenu.attr( "id" ) + "-menu" ),
               form = list.jqmData( "filter-form" );
               
               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 );
               }
               
               selectmenu
               .filterable({
                  input: input,
                  children: "> option[value]"
               })
               
               .on( "filterablefilter", function() {
                  selectmenu.selectmenu( "refresh" );
               });
            })
            
            .on( "pagecontainerbeforeshow", function( event, data ) {
               var listview, form;
               
               if ( !pageIsSelectmenuDialog( data.toPage ) ) {
                  return;
               }
               
               listview = data.toPage.find( "ul" );
               form = listview.jqmData( "filter-form" );
               data.toPage.jqmData( "listview", listview );
               listview.before( form );
            })
            
            .on( "pagecontainerhide", function( event, data ) {
               var listview, form;
            
               if ( !pageIsSelectmenuDialog( data.toPage ) ) {
                  return;
               }
               
               listview = data.prevPage.jqmData( "listview" ),
               form = listview.jqmData( "filter-form" );
               listview.before( form );
            });
         })( jQuery );
      </script>
   </head>
   
   <body>
      <h2>Filter long list Selectmenu Example</h2>
      <form>
         <div class = "ui-field-contain">
            <label for = "filter">Basic:</label>
            
            <select id = "filter" data-native-menu = "false" class = "filterable-select"><br>
               <option value = "de">Delhi</option>
               <option value = "pu">Chandigarh</option>
               <option value = "ch">Chennai</option>
               <option value = "pune">Pune</option>
               <option value = "na">Nasik</option>
               <option value = "ma">Madhurai</option>
               <option value = "oo">Ooty</option>
               <option value = "ke">Kerala</option>
               <option value = "be">Belgaum</option>
               <option value = "pu">Punjab</option>
               <option value = "ban">Bangalore</option>
               <option value = "man">Mangalore</option>
               <option value = "mu">Hubli</option>
               <option value = "tha">Thane</option>
               <option value = "jh">Jhansi</option>
               <option value = "ja">Jaipur</option>
               <option value = "dha">Dharwad</option>
               <option value = "sa">Satara</option>
            </select>
            
         </div>
      </form>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

Save the above html code as selectmenu_filter_long_list.html file in your server root folder.
Open this HTML file as http://localhost/selectmenu_filter_long_list.html and the following output will be displayed.

jquery_mobile_widgets.htm