jqueryui自动完成，自定义ajax数据

Posted 2021-02-24

This is made for a webservice that outputs varaiable data according to user input, ajax is called each time there is a change on the input.

$('.searchText').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/handlers/autocomplete.xml",
                    dataType: "xml",
                    type: "GET",
                    data: {
                         content: $('.searchText').val()
                }, success: function (xmlResponse) {
                    var data = $("product", xmlResponse).map(function (ul, item) {
                        return {
                            value: $.trim($("productName", this).text()),
                            cat: $.trim($("productCatNr", this).text()),
                            thumb: $.trim($("productThumb", this).text()),
                            url: $.trim($("productUrl", this).text())
                        };
                    });
                    response(data);
                }
            });
        }
    }).data("autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a href='" + item.url + "'>" + "<img src='" + item.thumb + "'/>" + "<h4>" + item.value + "</h4>" + "<span>" + item.cat + "</span>" + "</a>")
        .appendTo(ul);
    };