jquery - 如何向 jQuery UI 自动完成添加 header

Question

我需要向自动完成功能添加 header 。在此自动完成功能中，我使用 Web 方法从数据库获取数据，并且使用 jquery-ui-1.8.16。下面你可以看到我的自动完成功能

$("#sub_Header_PropertyTab1_ucPropertyTabs_AddressTab2_txtPropertyKommunenr").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: './webservices/lookup.asmx/GetKommuneAutocom',
                data: "{ 'prefixText': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('^')[1] + "-" + item.split('^')[0],

                            val: item.split('^')[2]
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            //            alert(i.item.label);
            $("#sub_Header_PropertyTab1_ucPropertyTabs_AddressTab2_txtPropertyKommunenr").val(i.item.val);
            //$("#").val(i.item.val);
            return false;
        },
        focus: function (e, i) {
            $("#sub_Header_PropertyTab1_ucPropertyTabs_AddressTab2_txtPropertyKommunenr").val(i.item.val);
            return false;
        },

        minLength: 1
    });

Answer 1

您可以扩展小部件自动完成插件，并通过覆盖 _renderMenu 函数将自定义 header 添加到自动完成列表中。

代码(带有本地数据):

$(function () {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"];

    $.widget("custom.autocompleteheader", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var self = this;
            $.each(items, function (index, item) {
                self._renderItem(ul, item);
                if (index == 0) ul.prepend('<li class="header-auto"> Header for autocomplete!!</li>');
            });
        }
    });

    $("#tags").autocompleteheader({
        source: availableTags
    });

});

引用号:http://api.jqueryui.com/jQuery.widget/

演示:http://jsfiddle.net/IrvinDominin/rMkER/