当前位置:网站首页>搜索框字符自动补全
搜索框字符自动补全
2022-08-01 07:07:00 【mountisome】
jQuery Autocomplete
jQuery Autocomplete插件根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择。
我用的是别人在Autocomplete插件基础之上改造的一个插件。
从上面链接下载代码即可。
具体代码
使用之前引入jQuery文件,我使用的是jquery-3.6.0.min.js
。
css和js代码就是上面链接中下载的代码。
需要注意的是:
- 为了防止前端发送过多请求到后端,必须使用JavaScript函数节流来限制发送请求的数目。
- 以上的数据是提前在前端用数组保存的,如果想要及时地传递数据,就要用到AJAX异步从前端发送数据到后端,然后后端将数据封装好再返回到前端。
JavaScript函数节流
概念:限制一个函数在一定时间内只能执行一次。
如果不做函数节流的话,可能会造成程序运行速度降低,甚至卡死崩溃。重复的AJAX请求也可能导致数据混乱,造成网络拥塞。
代码:
function throttle(method,delay,duration){
let timer=null, begin=new Date();
return function(){
let context=this, args=arguments, current=new Date();
clearTimeout(timer);
if(current-begin>=duration){
method.apply(context,args);
begin=current;
}else{
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
}
然后对键盘按键松开事件调用函数:
window.onkeyup = throttle(check,100,200); // check函数是调用ajax请求
AJAX请求
具体可以看我的这篇文章。
我的js部分代码具体实现如下:
<script th:inline="javascript">
let data = []; // 保存从后端传递过来的数据
let autoComplete = new AutoComplete('subTitle','auto',data);
function check() {
let subTitle = document.getElementById("subTitle").value; // 搜索框中的内容
if (subTitle != null && subTitle !== "" && typeof (event) != "undefined" && event.keyCode !== 13 && event.keyCode !== 38 && event.keyCode !== 40) {
// ajax请求
jQuery.ajax({
url: "/user/findSubtitlesByName",
type: "post",
async : false,
data: {
"subTitle": subTitle
},
dataType: "JSON",
success: function(data) {
autoComplete.value_arr = data;
},
error: function(errorMsg) {
console.log(errorMsg);
}
});
}
autoComplete.start(event);
}
// 函数节流
function throttle(method,delay,duration){
let timer=null, begin=new Date();
return function(){
let context=this, args=arguments, current=new Date();
clearTimeout(timer);
if(current-begin>=duration){
method.apply(context,args);
begin=current;
}else{
timer=setTimeout(function(){
method.apply(context,args);
},delay);
}
}
}
window.onkeyup = throttle(check,100,200);
</script>
实现效果
边栏推荐
- Data organization -- singly linked list of the linear table
- 阿里云李飞飞:中国云数据库在很多主流技术创新上已经领先国外
- my creative day
- Srping bean in the life cycle
- 插入排序—直接插入排序和希尔排序
- Solve the problem of page flicker caused by browser scroll bars
- MVVM项目开发(商品管理系统一)
- Upgrade to heavyweight lock, lock reentrancy will lead to lock release?
- Sound Signal Processing Fundamental Frequency Detection and Time-Frequency Analysis
- 基于百度OCR的网站验证码在线识别
猜你喜欢
目标检测概述-上篇
奇葩问题 npm install 报错 gyp ERR
「面经分享」西北大学 | 字节 生活服务 | 一面二面三面 HR 面
阿里云李飞飞:中国云数据库在很多主流技术创新上已经领先国外
特别数的和
点餐系统数据库设计--SQL Server
Image lossless compression software which works: try completely free JPG - C image batch finishing compression reduces weight tools | latest JPG batch dressing tools download
Offer brush questions - 1
Vim三种模式
Matlab simulink particle swarm optimization fuzzy pid control motor pump
随机推荐
Golang: go open web service
Dart 异常详解
Vim三种模式
Dart exception details
flinkcdc对mysql的date字段类型转化有什么解决思路么
爬虫框架 Scrapy 详解
目标检测概述-上篇
升级为重量级锁,锁重入会导致锁释放?
first unique character in characters
Leetcode第 304 场周赛
问下 mysql向pg同步多个表的话 有什么好的方案吗?
More than 2022 cattle guest school game 4 yue
Datagrip error "The specified database userpassword combination is rejected..."Solutions
weight distribution
自制一款远程控制软件——VeryControl
表的创建、修改与删除
JSON 与 JS 对象的区别
滚动条样式修改
Guest brush SQL - 2
Self-made a remote control software - VeryControl