`

jquery autocomplete查询速度优化

阅读更多

在网上搜索优化jquery的autocomplete插件,总是没有具体的内容。自己做的一个应用,需要从数据库读数据,然后在输入框中用autocomplete自动提示, 但是每次查询速度都很慢,原因是每次都连接DB。后来想把数据读到缓存里,每次不读数据库了,直接从缓存里读取,速度还是没有明显改观,最后看了某些大网站的页面源代码,才发现终极奥秘。 原来都把数据加载到页面上了,用户输入文字查询的时候,直接从页面上取数据。。。。。。。速度能不快么,所以总结了一下,按以下步骤来实现:

 

1. 服务器启动的时候,将需要查询的所有数据加载到缓存里。

2.在打开页面的时候,用ajax异步把数据从缓存里读出来,保存到页面上。

3.autocomplete直接利用页面上的数据来显示。

 

贴上后两步的代码示例吧:

var datas;//保存要检索的所有数据,list可以存字符串,也可以是对象,我这里是字符串,比如["123","456"]

$.ajax({
       url:"XXX!XXX.action",
       success:function(value){
             datas= value.datas;
       },
       async: false //这个很关键,要不然无法给变量datas异步赋值
    });


 $("#input").autocomplete(datas,{
     minChars: 0,
     width: 310,
     matchContains: true,
     autoFill: false,
     formatItem: function(row, i, max) {
         return i + "|" + row;  
     },
     formatResult: function(row) {
         return row;   
     }
 
  
 });

分享到:
评论

相关推荐

    jquery Autocomplete 仿百度搜索 只能搜索提示

    数据库设计应该考虑到性能和可扩展性,可能采用索引优化、缓存策略等手段提高查询速度。 实现jQuery Autocomplete的核心步骤如下: 1. 引入jQuery和jQuery UI库,确保Autocomplete插件可用。 2. 在HTML中设置...

    JQuery autocomplete Ajax分页控件

    在Web开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。...这种实现方式需要对jQuery、Ajax和前端分页原理有深入的理解,同时也展示了开发者对优化用户体验的考量。

    jQuery-Autocomplete-master.rar

    jQuery Autocomplete是一个非常实用的前端插件,它允许开发者为输入框添加自动补全功能,极大地提升了用户体验。这个"jQuery-Autocomplete-master"压缩包提供了一个简单的示例,用于演示如何利用jQuery实现自动补全...

    jQuery autocomplete 自动加载

    jQuery Autocomplete是一款非常实用的插件,用于在输入框中实现自动补全功能。这个功能在许多网站上广泛使用,例如搜索引擎、电子商务网站的商品搜索、社交媒体的用户名提示等。jQuery库的强大结合Autocomplete插件...

    jquery.autocomplete.js

    与之配套的"jquery.autocomplete.min.js"是经过压缩和优化的版本,旨在减小文件体积,提高页面加载速度。 描述中提到的“jquery解决了跨浏览器问题”,这是jQuery库的一大优点。jQuery库的出现,使得开发者可以编写...

    jQuery:AutoComplete使用指南

    2. **异步查询**:对于远程数据查询,插件支持异步处理,以提高响应速度和用户体验。 3. **性能优化**:通过合理设置`cacheLength`、`matchSubset`等参数,可以有效减少服务器负载,提高查询效率。 #### 五、示例...

    jQuery Autocomplete自动完成插件

    通过阅读和理解给定的文件内容,开发者可以了解到如何使用jQuery Autocomplete自动完成插件,并能够根据项目需求进行适当配置和优化,从而在实际项目中应用这项技术,为用户提供更加便捷的输入体验。

    jquery autocomplete

    **jQuery Autocomplete 知识点详解** `jQuery Autocomplete` 是一个非常流行的 jQuery 插件,用于实现输入框自动补全功能。它极大地提升了用户体验,让用户在输入时能快速找到匹配的选项,常用于搜索框、表单输入等...

    前端项目-jquery-autocomplete.zip

    **jQuery AutoComplete 插件详解** 前端开发中,用户输入的自动补全功能是一个常见的需求,它可以提升用户体验,使得用户能够快速找到并选择所需的信息。`jQuery AutoComplete` 是一个基于 jQuery 的轻量级插件,它...

    jQueryAutocomplete模糊匹配下拉可输入.rar

    1. **引入jQuery和插件**:首先,确保在网页中引入了jQuery库以及jQuery Autocomplete插件的脚本文件。通常,这可以通过在`<head>`标签内添加`<script>`标签来完成。 2. **创建HTML输入框**:在HTML结构中,创建一...

    autocomplete汉字与拼音的双重查询

    4. **性能优化**:在大数据量的词汇表下,优化查询速度至关重要,可以利用数据结构的特性,如Trie树的前缀匹配,来降低查询复杂度。 5. **排序策略**:根据用户输入习惯和词汇的使用频率,对补全结果进行排序,最...

    前端项目-jquery.devbridge-autocomplete.zip

    【标题】"前端项目-jquery.devbridge-autocomplete.zip" 是一个专门用于前端开发的自动完成功能包,基于jQuery库构建。它旨在帮助用户在输入框中键入文本时,实时提供相关的建议列表,提高用户体验并加快输入速度。 ...

    jquery模糊查询插件

    jQuery 模糊查询插件,如 `jquery.autocomplete`,允许用户在输入框中输入部分关键词后,即刻显示与之相关的搜索结果。这种实时反馈的技术通常被称为自动补全或下拉提示。它通过匹配输入文本与预定义的数据源,快速...

    jquery easyui TagBox with Autocomplete ajax请求方式自动填充

    开发过程中需要注意前后端的交互,确保数据传输的安全性和准确性,同时优化用户界面的响应速度,以提升整体应用的用户体验。在实际项目中,还可以根据需求进行自定义扩展,如添加搜索限制,优化匹配算法,或实现更...

    jQuery UI Autocomplete 1.8.16 中文输入修正代码

    早期版本的jQuery UI Autocomplete,如1.8.16,可能没有优化针对中文输入的体验,导致搜索响应不够及时或者匹配不够准确。 为了解决这些问题,开发者们可能需要对jQuery UI Autocomplete组件进行定制修改。在提供的...

    autocomplete

    - 优化搜索算法,确保查询效率。 - 考虑到不同设备和屏幕尺寸,确保自动补全的可访问性和可用性。 通过理解并熟练运用jQuery Autocomplete插件,开发者能够轻松实现高效且用户友好的自动补全功能,提升Web应用的...

    jQuery UI AutoComplete 使用说明

    通常,为了优化页面加载速度,我们会只引入需要用到的部分,而不是整个库。对于AutoComplete,你需要引入以下脚本: ```html <script src="jquery-1.5.1.min.js" type="text/javascript"> <script src="jquery.ui....

    autocomplete自动补全

    **jQuery Autocomplete 知识点详解** `jQuery Autocomplete` 是一个非常实用的功能,它能够为用户在输入框中提供动态的建议或自动补全,极大地提升了用户体验。这个功能是基于 jQuery UI 库中的 `Autocomplete` ...

    jquery complete

    2. 使用插件:为了简化开发过程,jQuery社区开发了多个自动完成插件,如`jQuery UI Autocomplete`和`dyve-jquery-autocomplete`等。这些插件提供了丰富的配置选项和内置的动画效果,大大降低了开发门槛。 三、...

Global site tag (gtag.js) - Google Analytics