JqueryUI autocomplete result list to go with jquery Mobile

I want to push result开发者_StackOverflow中文版 list of autocomplete source inside ul element of jquery mobile, I suspect open event can help me out here. If any of you have achieved something like this, would be great help to me (new to 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>

---

I achieved the desired output by extracting barebones of jquermobile tags with the help of Firebug (i am not sure if this was good idea, but it is working great for me):

    <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>

---

You can indeed do this. You need to provide open with a callback function, and this ill be triggered once the autocomplete menu is opened. Your function should therefore do something as follows. First, get a handle on your unordered list container:

var list = $('#searchResultList');

... then iterate your search results ($.each() or similar should do). For each result value, append a list item to your ul:

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

... and then finally you will need to refresh the list so that jQM updates the UI properly:

list.listview('refresh');

---

In case you're still interested but I doubt you are

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