Question

我想在jquery mobile的 ul 元素中推送自动完成源的结果列表，我怀疑开放事件可以帮助我在这里。如果你们中的任何一个人已经取得了这样的成绩，对我来说会很有帮助（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()或类似的应该）。对于每个结果值，append是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;
            };

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

3 个答案: