当前位置:首页 >> 网络编程

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

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

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

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>jQuery UI Autocomplete - Default functionality</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="external nofollow" >
 <script src="/UploadFiles/2021-04-02/jquery-1.10.2.js">

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

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

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

 $(function() {
 //自定义缓存变量
 var cache = {};
 //自动完成插件函数
 $("#tags").autocomplete({
 //定义用户最少输入的字符数
 minLenght: 2,
 source: function(request, response){//定义远程获取数据源函数
 var term = request.term;//定义用户请求信息变量
 if(term in cache) {//判断请求数据是否存在缓存中
 response(cache[term]);//真,从缓存中读取数据
 return;
 }
 $.getJSON('data.json', request, function(data, Status, xhr) {
 cache[term] = data.result;//缓存远程数据
 response(data.result);
 });
 }
 });
 });

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!