Select TypeError ui.item undefined Jquery Autocomplete

Question

here is my autocomplete select code:

       $('.js-main-search').autocomplete({
            minLength: 3,
            source: function(request, response) {
                $.getJSON('/dashboard/searchDocumentsAndCompanies.do',
                    { q: request.term},
                    function(data) {
                        if(data.length == 0){
                            data = [
                                {name: 'No matches found', resultType: 'COMPANY', noResults: true},
                                {name: 'No matches found', resultType: 'BRANCHES', noResults: true}
                            ];
                        }
                        data.unshift({name: 'Search from documents »',resultType: 'DOCUMENT', reqQuery: request.term});
                        response(data);
                    });
            },
            select: function(event, ul) {
                event.preventDefault();
                selected = true;
                    if (ul.item.resultType == 'DOCUMENT' && !wasSearched) {
                        wasSearched = true;
                        $(".textbox.ui-front li:eq(1)").before('<li class="search-category ui-menu-item">Documents</li>');

                        $.getJSON(Telema.CONTEXT_PATH + '/dashboard/searchDocumentsAndCompanies.do',
                            {q: ul.item.reqQuery, resultType: ul.item.resultType},
                            function (data) {
                                if (data.length == 0) {
                                    data = [
                                        {name: 'No matches found', resultType: 'DOCUMENT', noResults: true}
                                    ];
                                }
                                $.each(data, function (index, document) {
                                    $(".textbox.ui-front li:eq(1)").after('<li class="ui-menu-item">' + document.name + '</li>');
                                });
                            });
                    }
                }
        });

Html:

<div class="search">
    <form id="searchForm" action="/">
        <div class="search-form cfx">
            <input id="topSearchButton" type="submit" class="btn" value="">
            <div class="textbox ui-front">
                <input id="topSearchInput" type="text" class="textbox-input js-main-search ui-autocomplete-input" autocomplete="off">
                <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: none;"></ul></div>
            </div>
    </form>
</div>

I have TypeError ul.item undefined when I click one of the menu items. Could anyone suggest on that. If any more information is needed, I'd be happy to supply it!

Answer 1

Per the jQuery UI docs, the ui parameter to the select event handler has a property called item, which is an object with -- by default -- two properties: a label and a value. If you need an additional resultType property, you must explicitly define it as part of the source property when you initialize the autocomplete widget. Something like this:

source: (request, response) ->
    $.get .............
    response $.map data, (request_data) ->
    {
        label: request_data.value.replace(regex, "<strong>$1</strong>"),
        value: if request_data.id == "" then $('#q').val() else request_data.value,
        id: request_data.id
        resultType: request_data.resulttype
    }

Source: http://www.codedisqus.com/0mNVUVekWW/jquery-autocomplete-select-ignores-custom-data-fields.html