通过模拟数据,使用js在前端实现模糊查询下拉框功能实例教程

发布时间:2021-03-05 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了通过模拟数据,使用js在前端实现模糊查询下拉框功能实例教程前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据,而得出的查询结果。本实例教程讲解在前端文本框输入关键字,显示匹配的数据列表功能。

首先得准备一个文本框和显示数据列表的div元素,html代码如下所示:

<div class="match_container">
  ="input_container">
    input type="text" placeholder="请输入" id="input"</div="match_into"="match">
>

 

还得准备一些数据,用于模糊查询的检索源,如下所示:

var aData = [
  "docs help you learn and use","Tutorials and guides include downloadable example to accelerate your projects"
  //获取输入框
  var eInput = document.getElementById('input');
  获取列表包裹元素
  var eMatch = document.getElementById('match');

 

2. 显示列表元素
思考一下列表元素是如何显示的。看起来好像是在输入字符的时候显示,其实不然,应该在文本框获取焦点时就显示列表包裹元素了,只是因为还没有匹配到包含数据的列表,所以是空的而已。当文本框失去焦点时,再把列表隐藏,所以在文本框上绑定focus和blur事件,如下所示:

  eInput.addEventListener('focus',function(){
    显示列表
    eMatch.style.display = 'block';
  });
  eInput.addEventListener('blur',1)">隐藏列表
    eMatch.style.display = 'none';
  });

 

3. 显示包含查询关键字的数据
因为每次输入时,关键字都在修改,所以在文本框上绑定input事件。在input事件函数中查询到匹配的数据放到列表元素中。一般数据会比较多,所以需要控制显示列表的数量,所以还需要声明一个max变量。如下所示:

  最大显示条数
  var nMax = 5;
  eInput.addEventListener('input',1)">声明列表元素的html字符串
    var sHTML = '<ul>';
    获取关键字
    var sKey = this.value;
    匹配的数据总量
    var nCount = 0通过trim函数控制关键字不为空才匹配
    if(sKey.trim()!=''){
      循环数据
      for(let i=0;i<aData.length;i++){
        用正则检测匹配结果
        if(new RegExp(sKey,'i').test(aData[i])){
          匹配到的数据加到列表中 
          sHTML += '<li>'+aData[i]+'</li>';
          每匹配到一条数据,总量加1
          nCount ++;
        }
        数据达到最大条数时,跳出循环
        if(nCount>=nMax)break;
      }
    }
    列表结束标签
    sHTML += '</ul>'把列表填入到列表包裹中
    eMatch.innerHTML = sHTML;
  });

在实际工作中,大部分情况的模糊查询功能都是把关键字交给后台从数据库中检索再把结果返回给前端。不过我认为在数据量不大且固定的情况下,一次性把数据返回到前端,再由前端进行模糊查询可以有更好更快的体验。

总结


以上是前端之家为你收集整理的通过模拟数据,使用js在前端实现模糊查询下拉框功能实例教程全部内容,希望文章能够帮你解决通过模拟数据,使用js在前端实现模糊查询下拉框功能实例教程所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。