1

我正在尝试合并两个 jquery 移动示例，以便使用远程数据源获取文本输入的列表视图。

第一个示例演示了如何使用ListView的预定义数据集来填充文本输入（选择所需的项目时）

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

第二个示例（当您查看源代码时）演示了如何将远程数据源与 listview 一起使用。

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

理想情况下，远程数据将返回此列表的标签和值，即标签显示在列表下拉列表中，选择时将值放置在文本框中。

我已经尝试合并这两个示例，但是它似乎没有像我预期的那样工作 - 即像第一个链接一样，但使用远程数据。该示例可在http://jsbin.com/InucEvU/1/edit?html,output获得。如您所见，底部列表视图自动填充工作并填充文本输入。然而，最上面的没有 - 尽管相关变量被改变了。此外，我不太确定如何使用jquery ui autocomplete来滚动标签/值。关于如何实现这两个目标的任何想法？

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 回答