title: jQueryMobile filter on select
body: <p>I would like to implement this <a href="http://view.jquerymobile.com/master/demos/selectmenu-custom-filter/" rel="nofollow">http://view.jquerymobile.com/master/demos/selectmenu-custom-filter/</a> to my project, but I'm not getting anything, only an imagem looping in the center of screen.</p>
  
  <pre><code>&lt;fieldset data-role="collapsible"&gt;
      &lt;label&gt;Your preferred programming language: &lt;/label&gt;
      &lt;form&gt;
          &lt;select id="filter-menu" data-native-menu="false"&gt;
              &lt;option value="SFO"&gt;San Francisco&lt;/option&gt;
              &lt;option value="LAX"&gt;Los Angeles&lt;/option&gt;
              &lt;option value="YVR"&gt;Vancouver&lt;/option&gt;
              &lt;option value="YYZ"&gt;Toronto&lt;/option&gt;
          &lt;/select&gt;
      &lt;/form&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>After the body tag:</p>
  
  <pre><code>&lt;script&gt;
              $.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 = $( "&lt;input data-type='search'&gt;&lt;/input&gt;" );
              form = $( "&lt;form&gt;&lt;/form&gt;" ).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 );
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>I've also tried to put the $.mobile.document inside the $.function(), and the result is the same, an image looping in the center of the screen without nothing.</p>
  
  <p><a href="http://i.stack.imgur.com/zBsK0.jpg" rel="nofollow">http://i.stack.imgur.com/zBsK0.jpg</a></p>
  
  <p>What d'hell Am I doing wrong? Thanks.</p>