JQuery Ajax Autocomplete - Response event is not firing

Question

Below is my code ,the autocomplete works fine but i want to add default text in the autocomplete dropdown ,which i did as per below thread how to display default(static) text to jquery autocomplete dropdown

The actual implementation is little different and i am not able to get the response to work

var options, a;
jQuery(function() {
    var __response = $.ui.autocomplete.prototype._response;
    $.ui.autocomplete.prototype._response = function(content) {
        __response.apply(this, [content]);
        this.element.trigger("autocompletesearchcomplete", [content]);
    };

    a = $('#txtOccupation').autocomplete({
        serviceUrl: '/App_Handlers/GetAjaxSuggestions.ashx?datasets=occ',
        minChars: 1,
        delimiter: /(,|;)\s*/,
        deferRequestBy: 0, //miliseconds
        noCache: false,
        width: 420,
        onSelect: function(value, data) {
            alert('You selected: ' + value + ', ' + data);
        },
        response: function(e, ui) {
            ui.content.unshift({label: "OR select an occupation:", value: "OR select an occupation:"});
        }
    }).bind("autocompletesearchcomplete", function(event, contents) {
        alert(contents.length);
    });
    browser = jQuery.browser;
    $('.autocomplete').css('padding-left', '10px');
});

So i tried to bind a event to overwrite the response ,but its throwing error $.ui.autocomplete is undefined

the application is loading

but i have the reference in my xslt (everything is inside xslt and the jason string is received from handler for autocomplete).

Below code works fine ,except the text is not getting added

var options, a;
jQuery(function()
{
    a = $('#txtOccupation').autocomplete({
        serviceUrl: '/App_Handlers/GetAjaxSuggestions.ashx?datasets=occ',
        minChars: 1,
        delimiter: /(,|;)\s*/,
        deferRequestBy: 0, //miliseconds
        noCache: false,
        width: 420,
        onSelect: function(value, data) {
            alert('You selected: ' + value + ', ' + data);
        },
        response: function(e, ui) {
            ui.content.unshift({label: "OR select an occupation:", value: "OR select an occupation:"});//not working...
        }
    });
    browser = jQuery.browser;
    $('.autocomplete').css('padding-left', '10px');
});

JSON format

{
    "query": 're',
    "suggestions": ['Real Estate Brokers', 'Real Estate Sales Agents'],
    "data": ['41902100', '41902200']
}

Answer 1

Try this

jQuery(function() {
   $('#txtOccupation').autocomplete({
        serviceUrl: '/App_Handlers/GetAjaxSuggestions.ashx?datasets=occ',
        minChars: 1,
        delimiter: /(,|;)\s*/,
        deferRequestBy: 0, //miliseconds
        noCache: false,
        width: 420,
        onSelect: function(value, data) {
              alert('You selected: ' + value + ', ' + data);
        },beforeRender: function (container) {
              container.prepend("<div class='autocomplete-suggestion'>OR select an occupation:</div>");
        }
    });
});