1

リモートデータソースを使用してテキスト入力のリストビューを取得できるように、2 つの jquery モバイルの例をマージしようとしています。

最初の例は、リストビューで定義済みのデータ セットを使用してテキスト入力を埋める方法を示しています (必要な項目が選択されている場合)。

http://jsbin.com/upirol/11/edit

2 番目の例 (ソースを表示する場合) は、listview でリモート データソースを使用する方法を示しています。

http://api.jquerymobile.com/resources/listview/example16.html

理想的には、リモート データはこのリストのラベルと値を返します。つまり、ラベルはリストのドロップダウンに表示され、値は選択時にテキスト ボックスに配置されます。

これら 2 つの例をマージしようと試みましたが、期待どおりに機能していないようです。つまり、最初のリンクのように、リモート データを使用しています。この例はhttp://jsbin.com/InucEvU/1/edit?html,outputで入手できます。ご覧のとおり、一番下のリストビューのオートフィルが機能し、テキスト入力を埋めます。ただし、関連する変数が変更されているにもかかわらず、一番上のものはそうではありません。さらに、 jquery ui autocompleteでできるように、ラベル/値をロールインする方法がよくわかりません。これら2つの目的を達成する方法について何かアイデアはありますか?

4

1 に答える 1

2 
<!DOCTYPE html>
<html>
<head>
  <title>JQM latest</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"> 
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
  <script src="http://jquerymobile.com/demos/1.3.0-rc.1/js/jquery.mobile-1.3.0-rc.1.js"></script> 
  <script>
    $(document).on("pageinit", function() {
      $('#mylist').on('listviewbeforefilter', 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");
            $ul.find('li').on( "click", function() {
              $input.val($( this ).text());
            });
          });
        }
      });
    });
  </script>
  <style>
    #edit-with-js-bin { display: none !important; }
  </style>
</head>
<body>

  <div data-role="page">

    <div data-role="content" id="content">

    <form class="ui-filterable">
      <!--<input type="text" data-type="search" id="myinput">-->

      <ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-input="#myinput" id="mylist">
      </ul>
    </form> 
    </div><!-- /content -->

  </div><!-- /page -->

</body>
</html>

デモを参照してください: http://jsbin.com/ivEZUJU/5/

于 2013-08-26T09:12:57.990 に答える