Listview Autocompletado remoto

Descripción

filterablebeforefilterEl evento se utiliza para la fuente de datos de autocompletado remoto. Cuando el usuario escribe la consulta de búsqueda, se muestra dinámicamente una lista.

Ejemplo

El siguiente ejemplo demuestra el uso de la vista de lista de autocompletado remoto en jQuery Mobile.

<!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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como listview_remote_autocomplete.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/listview_remote_autocomplete.html y se mostrará el siguiente resultado.

↰ Previous page