`
manyinjin
  • 浏览: 92424 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用CachedAutocompleter提高Autocompleter性能

阅读更多
使用过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);
  }
});
分享到:
评论

相关推荐

    AutoCompleter

    在实际应用中,AutoCompleter可以通过优化搜索算法、缓存策略、异步加载等方法提高性能,同时还可以实现个性化推荐,根据用户的历史行为提供更符合其需求的建议。对于开发人员来说,理解和掌握如何实现和优化...

    jQuery自动完成插件autocompleter

    在项目中使用"autocompleter"插件,首先需要引入jQuery库,然后下载并引用插件文件。基本的使用步骤如下: 1. 引入jQuery库和插件文件,如`jquery.js`和`jquery.autocompleter.js`。 2. 初始化插件,指定输入框元素...

    jquery.autocompleter.js

    jquery.autocompleter.js

    jQuery autocompleter自动完成插件

    一款在文本输入框中实现自动完成的jQuery插件,支持中文自动提示,支持通过键盘上下键来选择结果的jquery.autocompleter插件,支持缓存。http://www.datouwang.com/jiaoben/173.html

    jQuery UI 自动完成插件 autocompleter

    其中,"autocompleter"是jQuery UI中的一个关键功能,它实现了自动完成(Autocomplete)的功能,用于增强输入框的用户体验,提高数据输入的效率。自动完成插件在诸如搜索引擎、表单填充等场景下尤为常见。 该插件的...

    jquery实现百度搜索自动完成插件autocompleter

    在实际应用中,还可以根据需求进行优化,例如添加缓存机制、限制请求频率、支持模糊搜索等,以提高性能和用户体验。通过不断学习和实践,开发者可以更好地掌握这一技术,为网站或应用增添更多亮点。

    jquery类似百度搜索自动完成插件autocompleter

    3. **初始化插件**:在JavaScript中,使用jQuery选择器获取输入框元素,并调用Autocompleter插件进行初始化。 ```javascript $('#search-input').autocompleter({ source: 'your_server_endpoint', // 后台接口...

    根据jquery-autocompleter写的两个搜索下拉选择(类似天猫,京东)

    官网没有提供demo,这个是根据官网写的demo:https://github.com/ArtemFitiskin/jquery-autocompleter,具体参数官网也可以查询,实现了常用搜索下拉选择,包含了键盘上下选择操作,节流等功能。

    jquery-autocompleter:易于自定义,并具有localStorage缓存支持

    bower install Autocompleter : npm install --save jquery-autocompleter : yarn add jquery-autocompleter 将插件添加到您的项目 包括jQuery: < script src =" ...

    自动完成插件autocompleter

    "Autocompleter"是一个专为此目的设计的插件,它具有简单、易用且高度可定制的特点,同时还支持数据缓存,以提升性能。 ### 1. 插件核心概念 **自动完成**:当用户在输入框中输入文本时,插件会根据已输入的部分...

    mootools-autocompleter:MooTools的此AutoCompleter脚本(作者Harald Kirschner-http

    自动完成器(v1.1) 图片提供:Harald Kirschner- ://digitarald.de/project/autocompleter/ 由Jo Carter(在github上的天使)和partikule(在github上)更新为可与MooTools 1.4.5(具有/不具有兼容性)一起使用。...

    jquery-autocompleter:jQuery 自动完成插件

    jQuery的Autocompleter插件 但是现在,我可以告诉你,我将这个自动完成器建模得尽可能简单。 从更高的层面来看,autocompleter 无非是将单个表单域的内容提交到一个 url,然后显示结果。 其余的都悬而未决。 这...

    ace-autocompleter:MongoDB QueriesAgg管道的Ace编辑器自动完成器

    mongodb-ace-autocompleter 提供MongoDB用法聚合管道在单个聚合管道阶段的上下文中提供完成: import ace from 'brace' ;import { StageAutoCompleter } from 'mongodb-ace-autocompleter' ;// Get the basic text ...

    Jquery自动完成

    5. **性能优化**:为了提高性能,插件通常会对输入的字符进行过滤,只在达到预设的最小字符数时才开始搜索。此外,可以使用缓存策略减少不必要的服务器请求。 6. **用户体验**:自动完成不仅提升了效率,还可以改善...

    jiaoben4646.zip

    同时,了解如何优化性能,例如减少不必要的计算,提高代码效率。 通过研究和实践这个"jiaoben4646.zip"项目,你不仅能掌握Web前端开发的基本技能,还能体验到3D视觉效果带来的乐趣,这将对你的Web开发能力提升...

    javascript代码自动补全插件

    Firebug不仅提供基本的代码调试功能,还具有强大的自动补全特性,而Firebug Autocompleter则进一步增强了这一特性,特别适用于使用大型JavaScript库的项目。对于任何想要提高JavaScript开发效率的开发者来说,这些...

    基于jquery.autocomplete的分页实现

    在实践中,你可能还需要考虑其他优化,例如缓存结果、异步加载、延迟加载等,以进一步提高性能。总的来说,实现基于jQuery Autocomplete的分页是一个涉及前端和后端协作的过程,需要理解HTTP请求、JSON数据交换、...

    jquery autocomplete 自动完成 插件

    jQuery Autocomplete插件是jQuery UI库中的一个组件,它提供了搜索框自动补全的功能,极大地提高了用户输入数据的效率和用户体验。这个插件基于jQuery框架,使得在网页中实现智能搜索和建议输入变得简单易行。 ### ...

    autoCompletejs是一个简单的纯vanillaJavascript自动补全库

    为了帮助开发者更好地理解和使用 `autoComplete.js`,项目通常会提供详尽的文档和示例代码。这些资源可以帮助你快速掌握基本用法,并了解如何根据自己的项目需求进行定制。 ### 7. 社区支持与更新 由于 `...

    script.aculo.us实现googleSuggest用例

    6. **优化性能**:为了提高性能和用户体验,可以添加缓存机制,避免每次按键都发起AJAX请求,而是仅在输入达到一定长度或用户暂停输入一段时间后发送请求。 7. **自定义样式**:使用CSS调整建议列表的外观,使其与...

Global site tag (gtag.js) - Google Analytics