Completamento automatico Listview Remote

Descrizione

filterablebeforefilterviene utilizzato per l'origine dati del completamento automatico remoto. Quando l'utente digita la query di ricerca, viene visualizzato dinamicamente un elenco.

Esempio

L'esempio seguente dimostra l'uso della visualizzazione elenco a completamento automatico remoto in 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come listview_remote_autocomplete.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/listview_remote_autocomplete.html e verrà visualizzato il seguente output.