首页
留言板
友链
关于
Search
1
内测“合金弹头”嘿嘿
897 阅读
2
Nginx搭建一个简易的图床
847 阅读
3
Kettle循环遍历结果集作为参数传入转换
830 阅读
4
Maven3.3.9的安装与配置
438 阅读
5
Apache Dubbo初步认识
437 阅读
知识库
好奇猫
日常说
笔记本
登录
/
注册
Search
标签搜索
maven
Spring
vue
Java
Java代码
前端
idea
帆软
MySQL
git
CSS
游戏
Bootstrap
生活
网上冲浪
邮件配置
说说
Nginx
Excel
数据库调优
龙流
累计撰写
61
篇文章
累计收到
18
条评论
首页
栏目
知识库
好奇猫
日常说
笔记本
页面
留言板
友链
关于
搜索到
1
篇与
模糊匹配
的结果
2022-08-30
Jquery实现模糊匹配快速选择输入
1.实现这个功能主要是 keyup() 事件,input框的值有变化时,会实时获取input的值value,然后通过ajax发送请求获取匹配的数据keyup()监测键盘松开时事件,所有在模糊匹配进行异步请求时,延时0.8秒内没有操作键盘再发送Html <div class="home_search"> <div class="search_box flex justify-b align-c"> <input type="text" placeholder="搜索科室" class="search_name" /> <button class="search_btn"><img src="/images/search.png" /></button> </div> <!-- 模糊查询框 --> <div class="search-scrollbar"> <ul class="dropdown-menu"> <c:forEach items="${sysKsAll}" var="sysKs"> <li><a>${sysKs.name}</a></li> </c:forEach> </ul> </div> </div>脚本如下: //监控input标签键盘操作 $(".search_box input").keyup(function (event) { last = event.timeStamp; setTimeout(function () { if(last-event.timeStamp==0){ //如果时间差为0(也就是你停止输入0.5s之内都没有其它的keyup事件发生)则做你想要做的事 let value = $(".search_box input").val(); getSearchData(value); } },800); }); //模糊查询请求数据 function getSearchData(value) { $.ajax({ url:'/keshigaikuang/searchKs', type: 'get', dataType: 'json', data: {searchVal: value}, success: function (data) { if (data.success){ let html = ""; for (let i = 0; i < data.sysKs.length; i++) { html += "<li><a>"+ data.sysKs[i].name +"</a></li>" } $(".dropdown-menu").html(html); } } }); }
2022年08月30日
254 阅读
0 评论
0 点赞