js、jquery实现列表模糊搜索功能过程解析


Posted in jQuery onMarch 27, 2020

实现的搜索功能:

1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变

2. 可以点击某一项进行选中列表项

3. 可以按下上、下、回车键来控制列表项

4. 按下回车键时则会选中列表项

5. 点击文本框中的下拉键头时会切换下拉框的显示/隐藏

6. 点击文本框外部时自动隐藏下拉框

先来预览一下效果吧!

列表中包含的列表项有:

北京、上海、杭州、安庆、大兴安岭、安阳、广州、贵阳、哈尔滨、合肥、邯郸、呼伦贝尔、淮南、黄山、济南、济宁、嘉兴、南昌、南通、南宁、南京

在预览时需要输入匹配以上项目的文字,以便更好的预览效果

js、jquery实现列表模糊搜索功能过程解析

具体的代码实现

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>js、jquery实现列表模糊搜索功能</title>
 <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.js"></script>
<style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }
  h2 {
    margin-bottom: 20px;
  }
  #container {
    width: 500px;
    text-align: center;
    margin: 0 auto;
    font-family: "微软雅黑";
    margin-top: 50px;
  }
  .selectContainer {
    position: relative;
  }
  .selectInput {
    width: 200px;
    height: 25px;
    border-style: none;
    border: 1px solid #999;
    border-radius: 3px;
    padding: 0 3px;
  }
  .picture_click {
    background: url(img/select-default.png) no-repeat; 
    opacity: 1; 
    width: 15px; 
    height: 8px;
    position: absolute;
    top: 10px;
    right: 125px;
  }
  .picture_click:hover {
    background-image: url(img/select-hover.png);
  }
  .selectList {
    width: 206px;
    height: 212px;
    overflow-y: scroll;
    text-align: left;
    margin: 0 172px;
    border: 1px solid #999;
    display: none;
    position: relative;
  }
  .selectList div {
    cursor: pointer;
  }
</style>
</head>
<body>
<div id="container">
  <h2>模糊搜索</h2>
  <div id="cityContainer" class="selectContainer">
    <label>城市:</label>
    <input type="text" placeholder="请输入城市名称" list="cityList" class="selectInput" name="cityName" id="cityName" value="" onfocus="fuzzySearch.call(this)" />
    <div class="picture_click dropDowns" style=""></div>
    <div id="cityList" class="selectList">
      <div id="001">北京</div>
      <div id="002">上海</div>
      <div id="003">杭州</div>
      <div id="004">安庆</div>
      <div id="005">大兴安岭</div>
      <div id="006">安阳</div>
      <div id="007">广州</div>
      <div id="008">贵阳</div>
      <div id="009">哈尔滨</div>
      <div id="010">合肥</div>
      <div id="011">邯郸</div>
      <div id="012">呼伦贝尔</div>
      <div id="013">淮南</div>
      <div id="014">黄山</div>
      <div id="015">济南</div>
      <div id="016">济宁</div>
      <div id="017">嘉兴</div>
      <div id="018">南昌</div>
      <div id="019">南通</div>
      <div id="020">南宁</div>
      <div id="021">南京</div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
  //初始化下拉框
  initSearchInput();

  function fuzzySearch(e) {
    var that = this;
    //获取列表的ID
    var listId = $(this).attr("list");
    //列表
    var list = $('#' + listId + ' div');
    //列表项数组 包列表项的id、内容、元素
    var listArr = [];
    //遍历列表,将列表信息存入listArr中
    $.each(list, function(index, item){
      var obj = {'eleId': item.getAttribute('id'), 'eleName': item.innerHTML, 'ele': item};
      listArr.push(obj);
    })
    
    //current用来记录当前元素的索引值
    var current = 0;
    //showList为列表中和所输入的字符串匹配的项
    var showList = [];
    //为文本框绑定键盘引起事件
    $(this).keyup(function(e){
      //如果输入空格自动删除
      this.value=this.value.replace(' ','');
      //列表框显示
      $('#' + listId).show();
      if(e.keyCode == 38) {
        //up
        console.log('up');
        current --;
        if(current <= 0) {
          current = 0;
        }
        console.log(current);
      }else if(e.keyCode == 40) {
        //down
        console.log('down');
        current ++;
        if(current >= showList.length) {
          current = showList.length -1;
        }
        console.log(current);

      }else if(e.keyCode == 13) {
        //enter
        console.log('enter');
        //如果按下回车,将此列表项的内容填充到文本框中
        $(that).val(showList[current].innerHTML);
        //下拉框隐藏
        $('#' + listId).hide();
      }else {
        //other
        console.log('other');
        //文本框中输入的字符串
        var searchVal = $(that).val();
        showList = [];
        //将和所输入的字符串匹配的项存入showList
        //将匹配项显示,不匹配项隐藏
        $.each(listArr, function(index, item){
          if(item.eleName.indexOf(searchVal) != -1) {
            item.ele.style.display = "block";
            showList.push(item.ele);
          }else {
            item.ele.style.display = 'none';
          }
        })
        console.log(showList);
        current = 0;
      }
      //设置当前项的背景色及位置
      $.each(showList, function(index, item){
        if(index == current) {
          item.style.background = "#eee";
          $('#' + listId).scrollTop(item.offsetTop);
        }else {
          item.style.background = "";
        }
      })
      //设置下拉框的高度
      //212为列表框的最大高度
      if(212 > $('#' + listId + ' div').eq(0).height() * showList.length) {
        $('#' + listId).height($('#' + listId + ' div').eq(0).height() * showList.length);
      }else {
        $('#' + listId).height(212);
      }
    })
  }

  function initSearchInput() {
    //给下拉箭头绑定点击事件 点击下拉箭头显示/隐藏对应的列表
    //输入框的类名为selectInput
    //下拉箭头的类名为picture_click、dropDowns
    //下拉列表的类名为selectList
    for(var i = 0; i < $('.picture_click').length; i++) {
       $('.picture_click').eq(i).click(function(){
         $(this).parent().find('.selectList').toggle();
       })
    }
    //为列表中的每一项绑定鼠标经过事件
    $('.selectList div').mouseenter(function(){
      $(this).css("background", "#eee").siblings().css("background", "");
    });
    //为列表中的每一项绑定单击事件
    $('.selectList div').click(function(){
      //文本框为选中项的值
      $(this).parent().parent().find('.selectInput').val($(this).html());
      //下拉框隐藏
      $(this).parent().hide();
    });    

    //点击下拉框外部的时候使下拉框隐藏
    var dropDowns = document.getElementsByClassName('dropDowns');
    var selectList = document.getElementsByClassName('selectList');
    document.body.onclick = function(e){
      e = e || window.event;
      var target = e.target || e.srcElement;
      for(var i = 0; i < dropDowns.length; i++) {
        if(target != dropDowns[i] && target != selectList[i]){
          selectList[i].style.display = 'none';
        }
      }
    }
  }
</script>
</html>

需要注意的地方:

1. 使用此方法时,需要给输入框加类名selectInput,给下拉剪头加类名picture_click、dropDowns,给列表框加类名selectList;

2. 输入框需要有list属性,list属性对应的值为列表框的id值

3. 需要给文本框绑定事件,onfocus="fuzzySearch.call(this)",(由于自定义的函数中,this指向的是window,所以需要通过call方法改变this指向,即指向该文本框,以便在方法中使用)

4. 在实现搜索功能的过程中,遇到一点小问题,就是在获取列表项的offersetTop时,获取的是28,找不出原因,最终通过查阅相关资料终于解决,即想要获取子元素的offsetTop,则需要给父元素设置相对定位,才能获取到正确的offsetTop。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery实现鼠标滑动切换图片
May 27 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
jQuery编写QQ简易聊天框
Aug 27 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
jquery css实现流程进度条
Mar 26 #jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
jquery实现进度条状态展示
Mar 26 #jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 #jQuery
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
You might like
PHP基础知识介绍
2013/09/17 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
javascript简单写的判断电话号码实例
2017/05/24 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
layui--select使用以及下拉框实现键盘选择的例子
2019/09/24 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
python脚本设置超时机制系统时间的方法
2016/02/21 Python
深入理解Python3 内置函数大全
2017/11/23 Python
Python3 replace()函数使用方法
2018/03/19 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
python之mock模块基本使用方法详解
2019/06/27 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python文字转语音的实例代码分析
2019/11/12 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
汽车专业毕业生自荐信
2013/11/03 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
温馨提示标语
2014/06/26 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
秋收起义观后感
2015/06/11 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python