论坛首页 Web前端技术论坛

使用CachedAutocompleter提高Autocompleter性能

浏览 3041 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-05-24  
使用过scriptculous的人可能都会用到它的Autocompleter组件,确实很Cool的东东,但是相对于用户的输入速度来说,频繁的Ajax请求有时会滞后很多,使用cache是一种较好的解决方案,虽然它不能解决全部问题,但是如果一个页面有很多地方需要这种Autocompleter带来用户体验的提升还是很明显的。^_^
下面给出CachedAutocompleter的一种实现:
Ajax.CachedAutocompleter = Class.create();
Object.extend(Object.extend(Ajax.CachedAutocompleter.prototype, Autocompleter.Base.prototype), {
  initialize: function(element, update, url, options, externalToken) {
    this.baseInitialize(element, update, options);
    this.options.asynchronous  = true;
    this.options.onComplete    = this.onComplete.bind(this);
    this.options.defaultParams = this.options.parameters || null;
    this.url                   = url;
    this.cache                 = {};
    this.cacheKey              = "";
  },

  getUpdatedChoices: function() {
    this.cacheKey = this.getToken();
    entry = encodeURIComponent(this.options.paramName) + '=' +
      encodeURIComponent(this.cacheKey);
    this.options.parameters = this.options.callback ?
      this.options.callback(this.element, entry) : entry;
    if(this.options.defaultParams)
      this.options.parameters += '&' + this.options.defaultParams;
    if(this.options.parameters)
      this.cacheKey = this.options.parameters;
    if(this.cache[this.cacheKey]) {
        this.updateChoices(this.cache[this.cacheKey]);
    } else {
        new Ajax.Request(this.url, this.options);
    }
  },
  onComplete: function(request) {
    this.updateChoices(this.cache[this.cacheKey] = request.responseText);
  }
});
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics