リストビューリモートオートコンプリート

説明

*_filterablebeforefilter_* イベントは、リモートのオートコンプリートデータソースに使用されます。 ユーザーが検索クエリを入力すると、リストが動的に表示されます。

例

次の例は、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  =  "";
               $ull( "" );
               if ( value && value.length > 2 ) {
                  $ull( "<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>";
                     });
                     $ull( 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_autocompletel ファイルとしてサーバーのルートフォルダーに保存します。
このHTMLファイルをhttp：//localhost/listview_remote_autocompletelとして開くと、次の出力が表示されます。

Jquery-mobile-listview-remote-autocomplete

目次

リストビューリモートオートコンプリート

説明

例

出力