JqueryUI 自动完成结果列表与 jquery Mobile 一起使用

Question

我想将自动完成源的结果列表推送到 jquery mobile 的 ul 元素内，我怀疑 open 事件可以在这里帮助我。如果你们中的任何人取得了这样的成就，将对我有很大帮助（jquery 新手）

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<script type="text/javascript">

$(function () {
    $("#searchText").autocomplete({
        source: '/CRM/SearchResult',
        minLength: 1,
        appendTo: "#searchResultList",
        open: function () {             

        }
    });
});

</script>

<input type="text" name="searchText" id="searchText" />
  <ul data-role="listview" id="searchResultList">

  </ul>

Answer 1

我通过在 Firebug 的帮助下提取 jquermobile 标签的准系统来实现所需的输出（我不确定这是否是个好主意，但它对我来说非常有用）：

    <script type="text/javascript">
        $(function () {
            $("#searchTextBox").change(function (e) {
                var searchTerm = $("#searchTextBox").val();
                if (searchTerm.length == 0) {
                    $('ul li').remove();
                }
                else if (searchTerm.length >= 2) {
                    $('ul li').remove();
                    $.getJSON(
                        '/XYZ/SearchResult',
                        { term: searchTerm },
                         function (response) {

                             $.each(response, function (index) {
                                 var entityID = response[index].id;
                                 var displayText = response[index].label;

                                 var listItem = ' <li class="ui-btn ui-btn-icon-right ui-li "><div class="ui-btn-inner ui-li"><div class="ui-btn-text"><a href="/XYC/XDetail/' + entityID + '" target="_self" class="ui-link-inherit">' + displayText + '</a></div><span class="ui-icon ui-icon-arrow-r"></span></div></li>';

                                 $(listItem).appendTo("#ui-listview");

                             });

                         });
                }
            });
        });
    </script>
}

<div class="ui-input-search">
    <input placeholder="Filter items..." data-type="search" class="ui-input-text ui-body-null"
        id="searchTextBox" width>  
</div>
<p />
<div class="content-primary">
    <ul data-role="listview" class="ui-listview" id="ui-listview">
    </ul>
</div>

Answer 2

你确实可以做到这一点。您需要为 open 提供回调函数，一旦打开自动完成菜单，就会触发该回调函数。因此，您的函数应该执行以下操作。首先，获取无序列表容器的句柄：

var list = $('#searchResultList');

...然后迭代您的搜索结果（$.each() 或类似的操作应该这样做）。对于每个结果值，附加一个列表项到您的ul：

list.append('<li>' + YOUR_RESULT_VALUE + '</li>');

...最后您需要刷新列表，以便 jQM 正确更新 UI：

list.listview('refresh');

Answer 3

如果你仍然感兴趣但我怀疑你是

$("#textbox-filter").autocomplete({
                minLength: 2,
                source: '/AutoComplete/XYZ',
                search: function (event, ui) {
                    $("ul#listview li.ac").remove();
                },
                open: function (event, ui) {
                    $("ul#listview").listview('refresh');
                }
            })
            .data("autocomplete")._renderItem = function (ul, item) {
                $('<li class="ac"><a href="#one">' + item.value + '</a></li>').appendTo("ul#listview");
                return null;
            };