【问题标题】:jQuery Autocomplete: How to enable cache?jQuery自动完成:如何启用缓存?
【发布时间】:2012-07-12 18:37:15
【问题描述】:

这是我使用函数推送建议数组的源代码:

jQuery(document).ready(function ($){
    var cache = {};
    function split( val ) {
        return val.split( /,\s*/ );
    }

    function extractLast( term ) {
        return split( term ).pop();
    }

    $("#ctags-input")
        .bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                event.preventDefault();
            }
        })

    .autocomplete({ 

        source: function(req, add){
            var ctags_action = 'suggest_tags';

            var term = req.term;
            if (term in cache) {
               add(cache[term]);
               return;
            }

    $.getJSON(SuggestTags.url+'?callback=?&action='+ctags_action, req, function(data) {
                var suggestions = [];
                $.each(data, function(i, val){                              
                    suggestions.push({
                        label: val.name,
                        count: val.count
                    });
                });
                cache[term] = suggestions;  
                add(suggestions);

            });
        },          
        focus: function() {
            return false;
        },

        select: function( event, ui ) {
            var terms = split( this.value );
            terms.pop();
            terms.push( ui.item.value );
            terms.push( "" );
            this.value = terms.join( ", " );
            return false;
        }   
    })

    .data( "autocomplete" )._renderItem = function( ul, item ) {        
        return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + " (" + item.count+ ")</a>")        
        .appendTo(ul);
    };      
});

jQ UI站点demo为了增加缓存能力,直接对数据使用响应:

source: function( request, response ) {
   var term = request.term;
    if ( term in cache ) {
      response( cache[ term ] );
      return;
    }

   lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
    cache[ term ] = data;
    if ( xhr === lastXhr ) {
        response( data );
    }
 });
}

如何在我的代码中实现这个缓存演示?

【问题讨论】:

    标签: jquery-ui autocomplete


    【解决方案1】:

    将suggestions 放入缓存中。

    var term = req.term;
    if (term in cache) {
       add(cache[term]);
       return;
    }
    ...
    cache[term] = suggestions;
    add(suggestions);
    

    【讨论】:

    • 我更新了我的问题,在缓存中添加了建议,但它仍然发送 ajax 请求。
    • 问题是var cache = {};,这是每次进入函数都清空缓存。缓存需要是函数外的全局变量。
    • 我刚刚移动了 'var cache = {};'在函数之外并将其放在函数($)的开头。它仍然没有使用缓存。
    • 我刚刚看了多完整的演示。在其 source: 函数中,它在查找完成列表中的输入之前使用 extractLast(req.term) ,因此它只处理逗号分隔列表中的最后一项。你需要做类似的事情。如果没有这个,您将使用整个输入(包括已经完成的项目)作为缓存键。
    • 从演示中复制 split() 和 extractLast() 函数,然后将 var term = req.term; 更改为 var term = extractLast(req.term);
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-04-07
    • 2011-05-22
    • 1970-01-01
    • 1970-01-01
    • 2011-05-23
    • 1970-01-01
    • 2011-11-30
    相关资源
    最近更新 更多