Список результатов автозаполнения JqueryUI для работы с jquery Mobile

Question

Я хочу отправить список результатов источника автозаполнения внутри ul элемента jquery mobile, я подозреваю, что событие 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

Я достиг желаемого результата, извлекая скелеты из тегов jquermobile с помощью Firebug (я не уверен, что это хорошая идея, но она прекрасно работает для меня):

    <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

Если вы все еще заинтересованы, но я сомневаюсь, что вы

$("#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;
            };

Answer 3

Вы действительно можете сделать это. Вам необходимо предоставить open функцию обратного вызова, и это может сработать после открытия меню автозаполнения. Поэтому ваша функция должна делать что-то следующее. Сначала получите дескриптор вашего контейнера неупорядоченного списка:

var list = $('#searchResultList');

... затем выполните итерации результатов поиска ($.each() или аналогичное должно сделать). Для каждого значения результата append элемент списка в ul:

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

... и, наконец, вам нужно будет обновить список, чтобы jQM правильно обновил интерфейс:

list.listview('refresh');