如何为jQuery UI自动完成功能添加标题头

Question

如何为jQuery UI自动完成功能添加标题头

6

我需要给我的自动完成函数添加标题。在这个自动完成中，我使用一个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
    });

- kiransr

2

你好，欢迎来到 Stack Overflow！您能否解释一下您所说的“添加头部”是什么意思？ - Magnus Engdal

嗨Magnus，在自动完成函数中，如果您在文本框中输入任何内容，列表数据将显示出来，我需要添加一个标题。 - kiransr

1

在这个链接中，你将更好地理解：http://jsfiddle.net/alforno/g4stL/ - kiransr

2个回答

3

这对我很有用。在自动完成打开事件中，我只需使用prepend在列表中添加一个标题项即可。

open: function()
  {
    $('ul.ui-autocomplete').prepend('<li><div class="list-header">HEADER</div></li>');
  }

- ScottyG

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Irvin Dominin · Accepted Answer

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

代码（使用本地数据）：

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

});

Ref: http://api.jqueryui.com/jQuery.widget/ 演示: http://jsfiddle.net/IrvinDominin/rMkER/