JqueryUI-Autocomplete-Ergebnisliste, die mit Jquery Mobile verwendet wird

Question

Ich möchte die Ergebnisliste der automatischen Vervollständigungsquelle im ul-Element von jQuery Mobile einfügen, ich vermute, das Open-Event kann mir hier helfen. Wenn einer von euch so etwas erreicht hat, wäre das eine große Hilfe für mich (Neuling in jQuery).

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

        }
    });
});

Answer 1

Ich habe das gewünschte Ergebnis erzielt, indem ich die Grundlagen der jquermobile-Tags mit Hilfe von Firebug extrahiert habe (ich bin mir nicht sicher, ob das eine gute Idee war, aber es funktioniert großartig für mich):

        $(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="http://stackoverflow.com/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");

                             });

                         });
                }
            });
        });

}

Answer 2

Sie können dies tatsächlich tun. Sie müssen open mit einer Rückruffunktion versehen, die ausgelöst wird, sobald das Autovervollständigungsmenü geöffnet wird. Ihre Funktion sollte also folgendermaßen aussehen. Zuerst erhalten Sie einen Griff auf Ihren ungeordneten Listencontainer:

var list = $('#searchResultList');

... dann durchlaufen Sie Ihre Suchergebnisse ($.each() oder ähnliches sollte funktionieren). Für jeden Ergebniswert sollten Sie ein Listenelement zu Ihrem ul hinzufügen:

list.append('' + IHR_ERGEBNISWERT + '');

... und schließlich müssen Sie die Liste aktualisieren, damit jQM das UI ordnungsgemäß aktualisiert:

list.listview('refresh');

Answer 3

Falls du noch interessiert bist, aber ich bezweifle es

$("#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) {
                $('' + item.value + '').appendTo("ul#listview");
                return null;
            };