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

supuerlovepc

已于 2024-01-09 13:54:39 修改

阅读量2.7k

点赞数 3

分类专栏： js 文章标签： javascript 前端 css

于 2022-12-01 20:47:05 首次发布

本文链接：https://blog.youkuaiyun.com/supuerlovepc/article/details/128138446

版权

js 专栏收录该内容

1 篇文章

订阅专栏

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