一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > 网页制作 > jquery

推荐专题

最新下载

热门教程

jQuery实现用户输入自动完成功能

时间：2022-06-25 17:14:52 编辑：袖梨 来源：一聚教程网

利用jQuery UI中Auto-complete插件实现输入自动完成功能，大家在使用诸如淘宝、京东等电商平台搜索商品时，往往只要输入商品的一些特殊字符，就可以显示出和该字符相近的列表菜单，用户使用鼠标或者键盘方向键就可以快速选择，实现了很好的用户体验。

1.最简单的用户输入自动完成

 

 代码如下 复制代码

 

 jQuery UI Autocomplete - Default functionality

 

 

 

 

 请输入:

 

 

2 使用远程数据源自动完成

Auto-complete插件不光可以实现本地数据源的自动完成，也可以读取远程的数据源，列如实现从服务器端读取数据源信息。

通过将服务器数据缓存到浏览器中，获取的数据源首先保存在cache变量中。

 

 代码如下 复制代码

$(function() {

//自定义缓存变量

varcache = {};

//自动完成插件函数

$("#tags").autocomplete({

//定义用户最少输入的字符数

minLenght: 2,

source:function(request, response){//定义远程获取数据源函数

varterm = request.term;//定义用户请求信息变量

if(termincache) {//判断请求数据是否存在缓存中

response(cache[term]);//真，从缓存中读取数据

return;

}

$.getJSON('data.json', request,function(data, Status, xhr) {

cache[term] = data.result;//缓存远程数据

response(data.result);

});

}

});

});

 

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理