List item
一、概要
场景：用户可能记不得是哪个搜索词了，但是结果表单是唯一的，不可能实现模糊搜索。
解决方案：搜索框实现智能搜索提示。在用户搜索键入关键字的过程中，不断去请求后台，将查询结果放置在 标签里面，起到提示作用。
实现过程（以我的需求场景和开发过程为例）：
1、后台提供搜索接口。实现对键入值的模糊查询，返回查询结果给前台。
2、“接口编号”input框绑定onkeyup事件，在onkeyup函数中，设置监听时间，我设置的当键入停止0.7s后，调用后台提供的查询接口。
3、接口返回查询结果后，将值赋到 标签中。（这个过程略复杂，需要有一定CSS基础，要不会像我一样搜啊搜啊搜）
效果如图：
二、详解
所有所有的教程都在代码里了，注释很全很详细。
1、后台代码
/*** 模糊查询客户端页面所有接口*/@GetMapping(value = "/queryClientAllImpNo")@ResponseBodypublic ResultVO queryClientAllImpNo(String impNo) {List<String> impNoList = clientPageService.queryClientAllImpNo(impNo);return new ResultVO<>(impNoList);}
2、前台代码(主要)
<input class="paramInput" type="text" name="impNo" id="impNo" onkeyup="queryAllImpNo()"/><ul id="impNoListUl"></ul><style>/**------------------------------------------- 模糊查询CSS---------------------------------------------------*/#impNoListUl {z-index: 999; // 实现将ul浮现在页面最上层position: absolute; // 绝对定位，实现ul位置不变list-style-type: none; // 去除ul的原有格式margin-left: 80px; // 以下皆是对着页面调整，使ul框在搜索input下，宽度一致margin-top: -18px;width: 168px;padding: 0px;border: black 1px solid;}#impNoListUl li {width: 168px; // 对准input搜索框的宽度}#impNoListUl li:hover {// 设置鼠标悬浮事件background-color: rgb(219, 235, 255); // 鼠标悬浮时，背景颜色改变cursor: pointer; // 鼠标悬浮时，鼠标指针变小手}</style>
js代码
//等待用户不输入 0.7 秒后再去调用查询接口var loseInputMillsecs = 700;var clocker = null;// input搜索框的onkeyup事件函数function queryAllImpNo() {let impNo = $('#impNo').val();// input框键入内容为空时，不查询，因为数据太多可能会出现问题，而且太积极了也不好~if (impNo != null && impNo != '') {if (null == clocker) {// 设置的loseInputMillsecs为0.7秒，// setTimeout()函数可以实现等待0.7后调用loadImpNoList方法clocker = setTimeout(loadImpNoList, loseInputMillsecs);} else {//连续击键，重新开始计时clearTimeout(clocker);clocker = setTimeout(loadImpNoList, loseInputMillsecs);}} else {// 此处有可能是查询过一个了，ul列表时有值的// 讲道理第二次查询时应该将ul查询数据清空或更新$("#impNoListUl").find('li').remove();}}// 调用查询接口，并将查询结果动态展示在配置好的ul内function loadImpNoList() {let impNo = $('#impNo').val();if (impNo == null || impNo == '') {return;}$.ajax({url: "serverPage/queryServerAllImpNo?impNo=" + impNo,type: 'get',contentType: 'application/json;charset=utf-8', //设置请求头信息success: function (res) {let data = res.data;// 每次查询数据时，将前一次查询的数据清除，否则会累加在ul中$("#impNoListUl").find('li').remove();// 如果查询结果为空，最好给个提示，否则用户会以为没有这个功能或功能失效if (data== null || data == '' || data.length == 0) {let ele = document.createElement('li');ele.innerText = '(搜索无结果)';$('#impNoListUl').append(ele);} else {for (let i = 0; i < data.length; i++) {// // 实现在ul中动态创建li列表,并将数据置入li列表中let ele = document.createElement('li');ele.innerText = data[i];$('#impNoListUl').append(ele);}}}});}// 此函数绑定了ul列表的点击事件，点击时实现将选中的值放入input搜索框中，调用页面的查询接口$(function () {$("#impNoListUl").bind("click", function () {// ul里面那么多li 通过这行代码实现获取鼠标点击的li的值 let innerText = document.elementFromPoint(event.clientX, event.clientY).innerText;// 如果是没有结果的，就不要获取值了，清除掉返回if (innerText == '(搜索无结果)') {$("#impNoListUl").find('li').remove();return;}// 将选中的值赋到input中$('#impNo').val(innerText);// 已经找到想要的了，ul里面的数据就没必要在占地方了$("#impNoListUl").find('li').remove();// 调用页面查询按钮接口，返回页面结果。$('#searchBtn').click();});});
总结一下：有想法就能做出来。
onkeyup知识点：
onkeydown 事件会在用户按下一个键盘按键时发生onkeypress 事件会在键盘按键被按下并释放一个键时发生onkeyup 事件会在键盘按键被松开时发生
setTimeout()
是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。
