javascript - 选择 TypeError ui.item 未定义 Jquery 自动完成

Question

这是我的自动完成选择代码:

       $('.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>

当我单击其中一个菜单项时，出现TypeError ul.item undefined。有人可以对此提出建议吗？如果需要更多信息，我很乐意提供!

Answer 1

根据 jQuery UI docs ，选择事件处理程序的 ui 参数有一个名为 item 的属性，它是一个对象，默认情况下具有两个属性:标签和值。如果您需要额外的 resultType 属性，则必须在初始化自动完成小部件时将其显式定义为 source 属性的一部分。像这样的事情:

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
    }

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