How to add header to a jQuery UI autocomplete

Question

I need to add header to my autocomplete function.In this autocomplete, I am using a web method to fetch the data from database and i am using jquery-ui-1.8.16. below you can see my autocomplete function

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

You can extend the widget autocomplete plugin, and add a custom header to the autocomplete list by overriding the _renderMenu function.

Code (with local data):

$(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/

Demo: http://jsfiddle.net/IrvinDominin/rMkER/

Answer 2

This worked for me. I simply added a header item in the list using a prepend in the autocomplete open event.

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