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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 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 图片水印类代码
2012/08/27 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
php简单实现快速排序的方法
2015/04/04 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
js实现拖拽效果(构造函数)
2015/12/14 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
python绘制趋势图的示例
2020/09/17 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
自考毕业生自我鉴定
2013/11/04 职场文书
《去年的树》教学反思
2014/04/11 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
2015年司机工作总结
2015/04/23 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
纪录片信仰观后感
2015/06/08 职场文书
优质服务标语口号
2015/12/26 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js