Listview Remote autocomplete

Description

filterablebeforefilter event is used for remote autocomplete data source. When the user types in the search query then dynamically a list gets displayed.

Example

Following example demonstrates the use of remote autocomplete listview 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.10.2.min.js"></script>
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>

      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         $( document ).on( "pagecreate", "#remote", function() {
            $("#flip").on("change", function() {
               if (this.checked) {
                  var inp  =  $( "#autocomplete" ).filterable( "option", "input" );
                  $(inp).val("Belgaum").trigger("change");
               }
            });

            $( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
               var $ul  =  $( this ),
               $input  =  $( data.input ),
               value  =  $input.val(),
               html  =  "";
               $ul.html( "" );
               if ( value && value.length > 2 ) {
                  $ul.html( "<li>
                     <div class = 'ui-loader'>
                        <span class = 'ui-icon ui-icon-loading'></span>
                     </div>
                  </li>" );
               
                  $ul.listview( "refresh" );
                  $.ajax ({
                     url: "http://gd.geobytes.com/AutoCompleteCity",
                     dataType: "jsonp",
                     crossDomain: true,
                     data: {
                        q: $input.val()
                     }
                  })
               
                  .then( function ( response ) {
                     $.each( response, function ( i, val ) {
                        html + =  "<li>" + val + "</li>";
                     });
                     $ul.html( html );
                     $ul.listview( "refresh" );
                     $ul.trigger( "updatelayout");
                  });
               }
            });
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" id = "remote">
         <h2>Example of remote autocomplete</h2>

         <form>
            <label for = "flip"></label>
            <input type = "checkbox" data-role = "flipswitch" id = "flip" />
         </form>

         <form class = "ui-filterable">
            <input id = "filter-input" data-type = "search" />
         </form>

         <ul id = "autocomplete" data-role = "listview" data-inset = "true" 
            data-filter = "true" data-input = "#filter-input"></ul>
      <div>
   </body>
</html>

Output

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

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

jquery_mobile_widgets.htm