当前位置:网站首页>搜索框字符自动补全
搜索框字符自动补全
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>
实现效果
边栏推荐
猜你喜欢
仿牛客网项目总结
The BP neural network based on MATLAB voice characteristic signal classification
sum of special numbers
I have three degrees, and I have five faces. I was "confessed" by the interviewer, and I got an offer of 33*15.
Guest brush SQL - 2
How to generate and configure public key certificate in Alipay
Dbeaver connect the MySQL database and error Connection refusedconnect processing
Windows taskbar icon abnormal solution
mysql中添加字段的相关问题
Data organization -- singly linked list of the linear table
随机推荐
weight distribution
史上超强最常用SQL语句大全
Summary of test points about app updates in different ways
仿牛客网讨论社区项目—项目总结及项目常见面试题
How JS works
mysql的行锁和间隙锁
【一句话攻略】彻底理解JS中的回调(Callback)函数
MVVM project development (commodity management system 1)
Vsce package after the Command failed: NPM list - production - parseable - the depth = 99999 - loglevel = error exception
配置我的kitty
阿里云李飞飞:中国云数据库在很多主流技术创新上已经领先国外
JVM:运行时数据区-PC寄存器(程序计数器)
Upgrade to heavyweight lock, lock reentrancy will lead to lock release?
ORACLE modify another user package (package)
NIO编程
LeetCode 0149. Maximum number of points on a line
The Bean's life cycle
Golang:go静态文件处理
特别数的和
return; represents meaning