jquery mobile中的自动完成组合框

Question

我知道jQuery UI autocomplete-combobox小部件。但现在，我正在寻找一款相当于移动设备的手机。据我所知，在使用jQuery移动版时，我可以使用带有自动完成功能的选择框或列表视图。

jQuery移动版中是否有一个控件的行为类似于jQuery UI中的自动完成组合框？

我需要向用户提供一个下拉列表，用户可以在其中键入以筛选可用选项，或者向下滚动以查看所有选项

谢谢!

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