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

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

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

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

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

var aData = [
  "docs help you learn and use",
  "Tutorials and guides include downloadable example to accelerate your projects",
  "These docs assume that you are already familiar with",
  "code can be written with just the latest JavaScript",
  "You can sit with us!",
  "to build a simple online store application",
  "You don't need to install anything: you'll build the app using",
  "You'll find many resources to complement",
  "We've seeded this particular app with a top bar",
  "Log into StackBlitz, so you can save and resume your work",
  "To copy a code example from this tutorial",
  "click the icon at the top right of the code example box",
  "If the StackBlitz preview pane isn't showing what you expect",
  "so there may be slight differences in generated code",
  "you'll learn about template syntax by enhancing the 'Products' area",
  "component you modified earlier. Let's define a route to show individual product details.",
  "Update the product details page to include",
  "Add a cart component, which displays the items you added to your cart.",
  "Add a shipping component, which retrieves shipping prices for the items",
  "Services are an integral part of Angular applications",
];

分析一下功能，本实例模糊查询的功能很简单，就是当在文本框输入字符时，把输入的字符当做关键字，到数据中去匹配是否包含该关键字。然后把包含关键字的数据以列表的形式显示在文本框的下方。按照惯例，还是分步骤完成。

1. 获取文本框和列表元素，如下所示：

//获取输入框
  var eInput = document.getElementById('input');
  //获取列表包裹元素
  var eMatch = document.getElementById('match');

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

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

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

//最大显示条数
  var nMax = 5;
  eInput.addEventListener('input',function(){
    //声明列表元素的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;
  });

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

赞 (0)

相关推荐