我如何使用遠程數據填充與JqueryMobile列表的文本輸入

我想合併兩個jQuery的移動示例，使我得到listview爲使用遠程數據源的文本輸入。我如何使用遠程數據填充與JqueryMobile列表的文本輸入

第一個例子說明了如何使用預定義的數據與列表視圖設置爲填充的文本輸入（選擇需要的項目時）

第二個例子（當您查看源）顯示如何使用帶有listview的遠程數據源。

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

理想情況下，遠程數據將返回一個標籤和值對於該列表即標籤被顯示在列表下拉和選擇時的值被放置在文本框中。

我已經整理了我合併這兩個示例的嘗試，但它似乎並沒有像我期望的那樣工作 - 即像第一個鏈接但具有遠程數據。該示例可從http://jsbin.com/InucEvU/1/edit?html,output獲得。正如你所看到的底部列表視圖自動填充工作和填充文本輸入。然而，儘管相關變量被改變，但最高的一個不會。此外，我不太確定如何在標籤/價值中滾動，因爲可以使用jquery ui autocomplete。關於如何實現這兩個目標的任何想法？

來源

2013-08-24 user714852

<!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-26 09:12:57 Jianhong

嗨@Jianhong感謝您迴應:)這個例子似乎有一定道理，但是我看不到的方式輸入數據的值/標籤之間進行區分。我編輯了你的代碼來填充一個文本框（這需要完成與表單一起提交）http://jsbin.com/upirol/59/watch?html,js,console,output – user714852

沒問題。只要它能夠以最佳方式滿足您的需求並且可以維護。通常標籤是用於顯示的目的，它不能識別價值。就像你在html中的選擇選項一樣，價值就是識別，而任何外在的只是爲了顯示目的。 – Jianhong

我如何使用遠程數據填充與JqueryMobile列表的文本輸入

回答

相關問題