利用jQuery UI中自动完成插件实现输入自动完成功能,大家在使用诸如淘宝,京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显示出和该字符相近的列表菜单,用户使用鼠标或者键盘方向键就可以快速选择,实现了很好的用户体验。
<强> 1。最简单的用户输入自动完成
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> jQuery UI自动完成——默认实现;/title>
& lt;链接rel="样式表" href=" http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css " rel=巴獠縩ofollow”比;
& lt;脚本src=" http://code.jquery.com/jquery-1.10.2.js "祝辞& lt;/script>
& lt;脚本src=" http://code.jquery.com/ui/1.11.4/jquery-ui.js "祝辞& lt;/script>
& lt; script>
$(函数(){//定义并初始化字典库数据源集合
var availableTags=[
“动作脚本”,
“AppleScript”,
“Asp”,
“基本”,
“C”,
“c++”,
“Clojure”,
“COBOL”,
“ColdFusion”,
“Erlang”,
“Fortran”,
“Groovy”,
“Haskell”,
“Java”,
“JavaScript”,
“口齿不清”,
“Perl”,
“PHP”,
“巨蟒”,
“红宝石”,
“Scala”,
“计划”
];//自动完成插件函数
$(" #标签”).autocomplete ({//自动完成字典库数据源
来源:availableTags
});
});
& lt;/script>
& lt;/head>
& lt; body>
& lt; div类=皍i部件”比;
& lt;标签="标签"祝辞请输入:& lt;/label>
& lt;输入id=氨昵北?
& lt;/div>
& lt;/body>
& lt;/html>
<强> 2使用远程数据源自动完成
自动完成插件不光可以实现本地数据源的自动完成,也可以读取远程的数据源,列如实现从服务器端读取数据源信息。
通过将服务器数据缓存到浏览器中,获取的数据源首先保存在缓存变量中。
$(函数(){//自定义缓存变量
缓存var={};//自动完成插件函数
$(" #标签”).autocomplete ({//定义用户最少输入的字符数
minLenght: 2
来源:函数(请求、响应){//定义远程获取数据源函数
var词=request.term;//定义用户请求信息变量
如果在缓存(任期){//判断请求数据是否存在缓存中
缓存响应([词]);//真,从缓存中读取数据
返回;
}
.getJSON美元(的数据。json的请求、功能(数据、状态、xhr) {
缓存[词]=data.result;//缓存远程数据
响应(data.result);
});
}
});
});
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
