title: Jquery mobile stuck on loading while trying to follow demo
body: <p>I am trying to add a searchable select control to my Jquery mobile powered web application.The only Stack Overflow question I could find on the topic is this one</p>
  
  <p><a href="https://stackoverflow.com/questions/18094930/jquery-mobile-how-to-make-custom-select-box-with-filter">Jquery Mobile: How to Make Custom Select Box with filter</a></p>
  
  <p>It recommends following the demo located here</p>
  
  <p><a href="http://view.jquerymobile.com/master/demos/selectmenu-custom-filter/" rel="nofollow noreferrer">http://view.jquerymobile.com/master/demos/selectmenu-custom-filter/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&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;
  </code></pre>
  
  <p></p>
  
  <p>JS</p>
  
  <pre><code>$.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 = $( "&lt;input data-type='search'&gt;&lt;/input&gt;" );
          form = $( "&lt;form&gt;&lt;/form&gt;" ).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 form element is to be used for the filtering.
      list.filterable({
          input: input,
          children: "&gt; li:not(:jqmData(placeholder='true'))"
      });
  })
  // The custom select list may show up as either a popup or a dialog, depending on 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( "pagecontainerbeforeshow", function( event, data ) {
      var listview, form,
          id = data.toPage &amp;&amp; data.toPage.attr( "id" );
      if ( !( id === "filter-menu-dialog" || id === "title-filter-menu-dialog" ) ) {
          return;
      }
      listview = data.toPage.find( "ul" );
      form = listview.jqmData( "filter-form" );
      // Attach a reference to the listview as a data item to the dialog, because during the
      // pagecontainerhide 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.
      data.toPage.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( "pagecontainerhide", function( event, data ) {
      var listview, form,
          id = data.toPage &amp;&amp; data.toPage.attr( "id" );
      if ( !( id === "filter-menu-dialog" || id === "title-filter-menu-dialog" ) ) {
          return;
      }
      listview = data.toPage.jqmData( "listview" ),
      form = listview.jqmData( "filter-form" );
      // Put the form back in the popup. It goes ahead of the listview.
      listview.before( form );
  });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.ui-selectmenu.ui-popup .ui-input-search {
    margin-left: .5em;
    margin-right: .5em;
  }
  .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;
  }
  </code></pre>
  
  <p>However even when exactly copying the code from this demo into a new test project, the page will not load and gets stuck on the spinning loader animation.</p>
  
  <p>What am I missing here? Thank you.</p>
  
  <h2>Edit</h2>
  
  <p><strong>Console Errors</strong><br>
  Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.3), not all, only screen and (min-resolution: 200dpi) 
  <br>Uncaught TypeError: Cannot read property 'loader' of undefined jquery.mobile-1.3.0.min.js:2
  <br>Uncaught TypeError: undefined is not a function </p>