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

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 »', 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>');
        }

    };


当我开始输入搜索关键字时,有时会在控制台中显示以下错误:“递归过多”,但我不明白为什么。
欢迎任何建议。

最佳答案

通常,当您遇到堆栈溢出错误时,这是​​因为您有一个不存在退出条件或被触发的递归。查看您的代码,这是导致问题的函数。

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

关于javascript - 太多的递归-jQuery-自动完成,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30866950/

10-16 13:07