jquery mobile中的自動完成組合框

Question

我知道jQuery UI自動完成組合框部件。但現在我正在尋找一個移動等值。據我所知，在使用jQuery Mobile時，我可以使用自動完成的選擇框或列表視圖。

jQuery Mobile中的控件是否像jQuery UI中的Autocomplete組合框一樣？

我需要呈現給用戶一個下拉列表，在那裏他可以輸入過濾可用的選項或向下滾動一飽眼福

謝謝！

Answer 1

您可以使用

https://github.com/commadelimited/autoComplete.js

HTML：

<div data-role="page" class="jqm-demos" id="mainPage"> 
     <p> 
      <input type="text" id="searchField" placeholder="Categories"> 
      <ul id="suggestions" data-role="listview" data-inset="true"></ul> 
     </p> 
    </div> 

的javascript：

<script> 
     var autocompleteData = $.parseJSON('[{"value":"AL","label":"Alabama"},{"value":"AK","label":"Alaska"},{"value":"CA","label":"California"},{"value":"CO","label":"Colorado"},{"value":"CT","label":"Connecticut"},{"value":"NC","label":"North Carolina"},{"value":"ND","label":"North Dakota"},{"value":"NI","label":"Northern Marianas Islands"},{"value":"OH","label":"Ohio"},{"value":"OK","label":"Oklahoma"},{"value":"OR","label":"Oregon"},{"value":"PA","label":"Pennsylvania"},{"value":"PR","label":"Puerto Rico"},{"value":"RI","label":"Rhode Island"},{"value":"WV","label":"West Virginia"},{"value":"WI","label":"Wisconsin"},{"value":"WY","label":"Wyoming"}]'); 

     $("#mainPage").bind("pageshow", function (e) { 
      $("#searchField").autocomplete({ 
       target: $('#suggestions'), 
       source: autocompleteData, 
       callback: function (e) { 
        var $a = $(e.currentTarget); 
        $('#searchField').val($a.data('autocomplete').value); 
        $("#searchField").autocomplete('clear'); 
       }, 
       link: 'target.html?term=', 
       minLength: 1 
      }); 
     }); 
    </script> 

我公佈了其使用樣品中

https://stackoverflow.com/questions/34164377/how-to-use-jquery-mobile-autocomplete-plugin-with-jqgrid