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 21 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery实现电梯导航模块
Dec 22 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 has encountered an Access Violation at 7C94BD02解决方法
2009/08/24 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
最新pycharm安装教程
2020/11/18 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
二年级语文教学反思
2014/02/02 职场文书
员工入职担保书范文
2014/04/01 职场文书
小学语文课后反思精选
2014/04/25 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
民间个人借款协议书
2014/09/30 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL