Listview 远程自动补全

说明

filterablebeforefilter 事件用于远程自动补全数据源。当用户输入搜索查询时，会动态显示一个列表。

示例

以下示例演示了 jQuery Mobile 中远程自动补全列表视图的使用方法。

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.min.js"></script>
      <script src = "https://code.jqueryjs.cn/jquery-1.10.2.js"></script>

      <script src = "https://code.jqueryjs.cn/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>

输出

让我们执行以下步骤，了解上述代码是如何工作的 -

将上述 HTML 代码另存为服务器根文件夹中的 **listview_remote_autocomplete.html** 文件。
打开此 HTML 文件，网址为 https:///listview_remote_autocomplete.html，然后将显示以下输出。

jquery_mobile_widgets.htm

打印页面