js实现搜索框智能搜索提示，类似百度搜索

List item
一、概要
场景：用户可能记不得是哪个搜索词了，但是结果表单是唯一的，不可能实现模糊搜索。
解决方案：搜索框实现智能搜索提示。在用户搜索键入关键字的过程中，不断去请求后台，将查询结果放置在
- 标签里面，起到提示作用。
  实现过程（以我的需求场景和开发过程为例）：
  1、后台提供搜索接口。实现对键入值的模糊查询，返回查询结果给前台。
  2、“接口编号”input框绑定onkeyup事件，在onkeyup函数中，设置监听时间，我设置的当键入停止0.7s后，调用后台提供的查询接口。
  3、接口返回查询结果后，将值赋到
  - 标签中。（这个过程略复杂，需要有一定CSS基础，要不会像我一样搜啊搜啊搜）

效果如图：

二、详解
所有所有的教程都在代码里了，注释很全很详细。

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>

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 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

js实现搜索框智能搜索提示，类似百度搜索相关推荐

百度搜索框怎么用HTML做,百度搜索框的基本实现
百度首页搜索框是这样的一个基本形式,我们搜索框里输入字符时就能显示出一些有关的联想词,如图2所示图1.png 图2.png 那么今天我们来写一下这种效果,不算一模一样,大概相同吧,哈哈. 第一步:在 ...
python字典实现关键字检索_如何实现搜索框的关键词提示功能
我们都使用过主流的搜索引擎,谷歌. bing,当然还有搜狗.百度之类.当你搜索某一关键词时,它会贴心在下拉框补全一些热门关键词,像下图这样: 搜索关键词提示你点击某一关键词,页面就直接跳转到结果页面 ...
chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值，chosen 实现远程搜索加载下拉选项
chosen.jquery.js .chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值,chosen 实现远程搜索加载下拉选项 chosen. ...
微信小程序搜索框以及简单的页面内容搜索的实现
1 效果先来看一下效果 2 设计思路 2.1 显示效果的设计本示例包含两种不同的搜索框,第一种搜索框是在最初状态下显示的搜索框,它由一个输入框input和一个表示"搜索"的图片 ...
win7计算机搜索不了,win7搜索不到文件提示没有与搜索条件匹配的项的解决方法...
在win7系统中可以通过关键词或后缀名查询特定的文件,不过有雨林木风win7用户在查找文件时,明明存在这个文件,但是找不到,提示"没有与搜索条件匹配的项",遇到这种问题,可能是搜索 ...
w7系统计算机搜索无法搜索了,win7系统在搜索框中输入文字后无法搜索的详细教程...
win7系统使用久了,好多网友反馈说win7系统在搜索框中输入文字后无法搜索的问题,非常不方便.有什么办法可以永久解决win7系统在搜索框中输入文字后无法搜索的问题,面对win7系统在搜索框中输入文字 ...
百度js 检测输入法_不明恶意攻击致lt;搜狗搜索gt;lt;搜索结果gt;跳转lt;百度搜索gt;技术原理分析...
不明恶意攻击致<搜狗搜索><搜索结果>跳转<百度搜索>技术原理分析原创 2017-09-29 玄魂工作室 EE 玄魂工作室不明恶意攻击致<搜狗搜索> ...
js 原生弹框post接口提示
js 原生弹框&post接口&提示 <!DOCTYPE html> <html><head><meta charset="UTF-8 ...
在bing中进行搜索，结果跳转至百度搜索，怎么解决？baidu.com bing.com后面自带莫名其妙的多余链接
在bing中进行搜索,结果跳转至百度搜索,怎么解决? 给大家提供一种可能性:Chrome或者edge的扩展插件恶意插件,会劫持bing搜索导致这个问题,任何杀毒软件全盘杀毒没有问题,但最后偶然在扩展插 ...

js实现搜索框智能搜索提示，类似百度搜索

js实现搜索框智能搜索提示，类似百度搜索相关推荐

最新文章

热门文章