Question

所以这是我的自动完成功能：

var selected;
    var itemAdded = false;

    $('.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 &raquo;', reqQuery: request.term, docSearch:true});
                    response(data);
                });
        },
        select: function( event, ui ) {

            event.preventDefault();
            selected = true;
            if(ui.item.docSearch && !itemAdded){
                $(".textbox.ui-front li:eq(1)").before('<li class="search-category ui-menu-item">Documents</li>');
                itemAdded = true;
            }
        }
    });

    $('.js-main-search').data("uiAutocomplete").close = function(event) {
        if (!selected){
            $('.js-main-search').data("uiAutocomplete").close.apply( this, arguments );
        }
        selected = false;
    };

    $('.js-main-search').data('uiAutocomplete')._renderItem = function( ul, item ) {
        itemAdded = false;
        item.value = item.name;
        var $el = $( "<li>" ).append(item.value);
        if(item.docSearch){
            $el.addClass( "search-documents-btn" );
            $el.one('click', function (e) {

                e.preventDefault();
                console.log(ul.children());
            });
        }
        if(!item.noResults && !item.docSearch){
            $el.append('<div class="meta"><a href="#">Documents</a> | <a href="#">Company page</a></div>');
        }
        $el.appendTo( ul );
        return $el;
    };

    $('.js-main-search').data('uiAutocomplete')._renderMenu = function(ul, items) {
        var companiesResults = true;
        var branchesResults = true;
        var that = this,currentCategory = '';

        $.each(items, function(index, item) {
            var li;
            if (item.resultType != currentCategory && !item.docSearch) {
                var categoryTitle = '';
                if(item.resultType == 'COMPANY'){
                    categoryTitle = 'Companies';
                    companiesResults = false;
                } else{
                    categoryTitle = 'Branches'
                    branchesResults = false;
                }
                ul.append('<li class="search-category">'+categoryTitle+'</li>');
                currentCategory = item.resultType;
            }

            li = that._renderItemData(ul, item);

            if (item.resultType) {
                item.value = item.name;
                li.attr('aria-label', item.resultType + ' : '+ item.value);
            }

        });

        if(companiesResults && branchesResults){
            ul.append('<li class="search-show-more-btn">Show more</li>');
        }

    };

当我开始输入搜索关键字时，它会在控制台中给出以下错误：“太多的递归”，但我不明白为什么。欢迎任何建议。

Answer 1

通常当您收到堆栈溢出错误时，这是因为您有一个递归，其中没有退出条件存在或被触发。查看代码，这是导致问题的功能。

$('.js-main-search').data("uiAutocomplete").close = function (event) {
    if (!selected) {
        $('.js-main-search').data("uiAutocomplete").close.apply(this, arguments);
    }
    selected = false;
};

我想selected = false;应该在递归调用之前的里面 if语句，如下所示：

    $('.js-main-search').data("uiAutocomplete").close = function (event) {
        if (!selected) {
            selected = false;
            $('.js-main-search').data("uiAutocomplete").close.apply(this, arguments);
        }
    };

递归太多 - jquery - 自动完成

1 个答案: