一、概要
场景：用户可能记不得是哪个搜索词了，但是结果表单是唯一的，不可能实现模糊搜索。
解决方案：搜索框实现智能搜索提示。在用户搜索键入关键字的过程中，不断去请求后台，将查询结果放置在<ul>标签里面，起到提示作用。
实现过程（以我的需求场景和开发过程为例）：
1、后台提供搜索接口。实现对键入值的模糊查询，返回查询结果给前台。
2、“接口编号”input框绑定onkeyup事件，在onkeyup函数中，设置监听时间，我设置的当键入停止0.7s后，调用后台提供的查询接口。
3、接口返回查询结果后，将值赋到<ul>标签中。（这个过程略复杂，需要有一定CSS基础，要不会像我一样搜啊搜啊搜）
效果如图：
image
二、详解
所有所有的教程都在代码里了，注释很全很详细。
1、后台代码
/**
* 模糊查询客户端页面所有接口
*/
@GetMapping(value = "/queryClientAllImpNo")
@ResponseBody
public 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>
//等待用户不输入 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 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。
