jquery - jquery mobile中的自动完成组合框

Question

我知道 jQuery UI 自动完成组合框小部件。但现在我正在寻找移动设备。据我所知，在使用 jQuery Mobile 时，我可以使用带有自动完成功能的选择框或列表视图。

jQuery Mobile 中是否有一个控件，其行为类似于 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