精华内容
下载资源
问答
  • 本文件属于文章《前端实现js模糊查询关键字显示下拉框功能的实例教程》的完整代码,在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在开发中直接使用。
  • 所谓模糊查询就是通过关键字在数据中匹配到包含关键字的数据,而得出的查询结果。本实例教程讲解在前端文本框输入关键字,显示匹配的数据列表功能。 首先得准备一个文本框和显示数据列表的div元素,html代码如下所示...

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

    首先得准备一个文本框和显示数据列表的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');
    
    1. 显示列表元素
      思考一下列表元素是如何显示的。看起来好像是在输入字符的时候显示,其实不然,应该在文本框获取焦点时就显示列表包裹元素了,只是因为还没有匹配到包含数据的列表,所以是空的而已。当文本框失去焦点时,再把列表隐藏,所以在文本框上绑定focus和blur事件,如下所示:
      eInput.addEventListener('focus',function(){
        //显示列表
        eMatch.style.display = 'block';
      });
      eInput.addEventListener('blur',function(){
        //隐藏列表
        eMatch.style.display = 'none';
      });
    
    1. 显示包含查询关键字的数据
      因为每次输入时,关键字都在修改,所以在文本框上绑定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;
      });
    

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

    展开全文
  • 需求中我们经常会遇到模糊查询的方式渲染数据,效果类似于下图: js渲染数据的方式如下: var keyword = $("#searchSchool").val(); for(var i=0;i<data.schoolNames.length;i++){ var renderPage = '&...

    需求中我们经常会遇到模糊查询的方式渲染数据,效果类似于下图:

    js渲染数据的方式如下:

    var keyword = $("#searchSchool").val();
    for(var i=0;i<data.schoolNames.length;i++){
       var renderPage = '<li dataId="'+data.schoolNames[i].id+'"><p>'+data.schoolNames[i].schoolName.replace(new RegExp(keyword,'g'),'<lable style="color: #28c4ff">'+keyword+'</lable>')+'</p></li>'
       $(".searchSchoolList").append(renderPage);
     }
    

     其中关键部分在于,replace需要替换的值是通过变量的方式进去的,如果通过replace(keyword,'')的方式的话,匹配一个是没有问题的,但如果要匹配全局的,replace(/keyword/g,'')这样的方式是不行的,变量keyword是传不到正则里面的,于是利用 JS 的 RegExp 对象,将 g 参数单拿了出来,这样的话,正则的内容可以用变量来代替了,

    string.replace(new RegExp(keyword,'g'),'<lable>'+keyword+'</lable>');

     

    转载于:https://www.cnblogs.com/sakura-lifangfang/p/10059458.html

    展开全文
  • 所谓模糊查询就是列表中的数据是否有符合关键字或某个字符。 实现的操作方法主要有两种: 1.字符串方法indexOf: 代码如下: var list = ["中国", "美国", "英国 "]; var arr = []; for (var i = 0; i < list....

    所谓模糊查询就是列表中的数据是否有符合关键字或某个字符。
    实现的操作方法主要有两种:
    1.字符串方法indexOf:
    代码如下:

     var list = ["中国", "美国", "英国 "];
     var arr = [];
     for (var i = 0; i < list.length; i++) {
     	//如果字符串中不包含目标字符会返回-1
     	if (list[i].indexOf("关键字或字符串") >= 0) {
     		arr.push(list[i]);
     	}
     }
    

    2.正则表达式RegExp:

    <script>
         var list = ["中国", "美国", "英国 "];
          var len = list.length;
          var arr = [];
          var reg = new RegExp("关键字或字符串");
          for (var i = 0; i < len; i++) {
                if (list[i].match(reg)) {
                      arr.push(list[i]);
                      console.log(arr);
                }
          }
    </script>
    

    在这里插入图片描述

    <h3>功能一:输入查询</h3>
    <table border="1" cellspacing="0" cellpadding="0" id="table">
          <tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></tr>
          <tr><td>2014213840</td><td>张三</td><td></td><td>20</td></tr>
          <tr><td>2014213841</td><td>李四</td><td></td><td>20</td></tr>
          <tr><td>2014213842</td><td>王三</td><td></td><td>30</td></tr>
    </table>
    <input type="text" name="" id="input" value="" placeholder="请输入查询关键字" />
    <script>
          $(function () {
                var text = "";
                //实时筛选,不用点击按钮
                setInterval(function () {
                      text = $('#input').val(); //获取文本框输入
                      // trim 去除字符串的头尾空格
                      if ($.trim(text) != "") {
                            $("#table tr:not('#theader')").hide().filter(":contains('" +
                                  text + "')").show();
                      } else {
                            $('#table tr').show(); //当删除文本框的内容时,又重新显示表格所有内容
                      }
                }, 100);
          })
    </script>
    
    <h3>功能二:点击 回车 按钮查询</h3>
    <table border="1" cellspacing="0" cellpadding="0" id="table2">
        <tr><th>学号</th><th>姓名</th><th>性别</th><th>年龄</th></tr>
        <tr><td>2014213840</td><td>张三</td><td></td><td>20</td></tr>
        <tr><td>2014213841</td><td>李四</td><td></td><td>20</td></tr>
        <tr><td>2014213842</td><td>王三</td><td></td><td>30</td></tr>
    </table>
    <input type="text" name="" id="input2" value="" placeholder="请输入查询关键字" />
    <input type="button" name="" id="search" value="搜索" />
    <script>
        // 通过点击按钮开始筛选
        $(function () {
              $('#search').click(function () {
                    var text = $('#input2').val(); //获取文本框输入
                    if ($.trim(text) != "") {
                          $("#table2 tr:not('#theader')").hide().filter(":contains('" +
                                text + "')").show();
                    }
              })
              $(document).keydown(function (e) {
                    if (e.keyCode == 13) {
                          $('#search').click();
                    }
              });
        });
    </script>
    

    在这里插入图片描述

    <h3>功能三:</h3>
    <div class="box">
          <pre>
                KeyDown:按键被按下时发生
                KeyPress:用户摁下按键,并且产生一个字符时发生
                KeyUp: 用户释放某一个按键时触发
          </pre>
          <h3>当发生 keydown 和 keyup 事件时,输入域会改变颜色。请试着在其中输入内容。</h3>
          Enter your name: <input type="text" id="color-change" style="width: 300px; height: 30px;">
    </div>
    <script type="text/javascript">
          $(document).ready(function () {
                $("#color-change").keydown(function () {
                      $("#color-change").css("background-color", "#f00");
                });
                $("#color-change").keyup(function () {
                      $("#color-change").css("background-color", "#00f");
                });
          });
    </script>
    
    <h3>功能 4:keyup 实现同步输入展示文字 </h3>
    <pre>
          keyup 是在用户将按键抬起的时候才会触发的,属于整个按键过程中的最后阶段,所以有其特定的用处,
          就是在左侧输入,右侧同步显示的过程中很有用处。典型的例子就是邮件编辑预览的应用。
    </pre>
    <textarea id="t1"></textarea>
    <div id="v1"></div>
    <script type="text/javascript">
          $(function () {
                $('#t1').live('keyup', function () {
                      $('#v1').text($(this).val());
                });
          });
    </script>
    
    展开全文
  • js模糊查询实例分享

    2020-10-20 18:58:40
    本文主要分享了js模糊查询的实现代码,没有接触到后台数据的知识,只是查询当前表格中每一行所包含的关键字。具有一定的参考价值,需要的朋友一起来看下吧
  • js实现关键字匹配高亮显示

    千次阅读 2019-04-19 20:15:29
    需求:用户输入文字之后,调用后台接口查询匹配关键字模糊搜索),并把匹配到的关键字进行高亮显示。 实现思路:将拿到的数据进行拆分,例如:用户输入“羽毛球“,接口返回数据“{label:‘羽毛球手胶’}”,需要...

    JS实现搜索关键字匹配高亮显示

    首先看效果
    在这里插入图片描述
    需求:用户输入文字之后,调用后台接口查询匹配关键字(模糊搜索),并把匹配到的关键字进行高亮显示。

    实现思路:将拿到的数据进行拆分,例如:用户输入“羽毛球“,接口返回数据“{label:‘羽毛球手胶’}”,需要把羽毛球三个字高亮展示,首先我们将数据进行拆分,使用indexOf找到是否存在“羽毛球“字符串,找到关键字之后进行存储,将带有关键字的部分全部删掉,继续匹配,知道匹配结束。

    代码实现(代码为小程序代码,其他语言思路一致):

    	matchingKeyFun() {
    		let keyword = this.data.keyword;
    		// 添加测试数据
    		let arr = [
    			{ label: '羽毛球关键字提示' },
    			{ label: '关键字搜索匹配羽毛球' },
    			{ label: '羽毛球搜索' },
    			{ label: '羽毛球拍测试羽毛球服测试羽毛球' }
    		];
    		// 最后输出数组
    		let matchingKeys = [];
    		arr.forEach((item, index) => {
    			let f = true, label = item.label;
    			matchingKeys[index] = [];
    			while (f) {
    				// 找到当前位置
    				let position = label.indexOf(keyword);
    				if (position == -1) {
    					f = false;
    					// 未匹配到关键字
    					matchingKeys[index].push({ label: label.substring(0, label.length) })
    				} else {
    					// 匹配位置+关键字长度
    					let matchEnd = position + keyword.length;
    					// 非匹配中的关键字
    					matchingKeys[index].push({ label: label.substring(0, position) })
    					// 匹配中的关键字
    					matchingKeys[index].push({ label: label.substring(position, matchEnd), checked: true })
    					// 去掉匹配到文字,重新进行筛选
    					label = label.substring(matchEnd, label.length);
    					// 匹配到了末尾,不再继续匹配
    					if (!label && label.length < 1) {
    						f = false;
    					}
    				}
    			}
    		})
    		this.setData({
    			matchingKeys: matchingKeys
    		})
    	},
    

    页面渲染

    	<view class="matching-key-block">
          <view class="matching-item" wx:for="{{matchingKeys}}" wx:key="~this" wx:for-item="arr">
            <view class="{{item.checked?'match-color':''}}" wx:for="{{arr}}" wx:key="~this">
              {{ item.label || '' }}
            </view>
          </view>
        </view>
    

    css部分就不过多描述

    公司项目碰到了这个需求,记录一下,方便日后使用!

    展开全文
  • JS实现模糊查询

    2014-08-15 10:12:54
    使用JS实现模糊查询,可在input文本框内输入某个关键字,就能展示其他包含此关键字的信息。
  • js实现模糊查询

    千次阅读 2018-03-29 17:06:32
    实现模糊查询方法有很多种,后端可以实现,前端使用js也可以实现。 后端实现起来需要根据输入框中搜索的关键字,去后台拼接SQL语句查询。 前端直接使用字符串的indexOf()方法或者正则表达式匹配实现,相比后端...
  • js模糊查询

    2016-12-26 10:03:00
    首先要明白什么是模糊查询(废话又来了),就是根据关键字把列表中符合关键字的一项或某项罗列出来,也就是要检查列表的每一项中是否含有关键字,因此抽象一下就是一个字符串中是否含有某个字符或者字符串。...
  • "模糊查询 - 查找" id = "search3" onclick = "demo03()" /> div > < div > < input type = "text" id = "studentName4" /> < input type = "button" value = "多关键字 - 查找" id = ...
  • 对于模糊查询,一般都是传关键字给后端,由后端来做。但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验。我目前的情况恰好是后台已经把全部数据给到前端了,所以就想用js对数据进行一...
  • js实现的模糊查询

    2019-05-23 14:20:00
    模糊查询,一般都是传关键字给后端,由后端来做, 但由于频繁的请求后台数据会对服务器造成过大的压力。 可将列表数据一次请求过来,然后用js对数据进行一个模糊查询。 1. indexof 方法 2.split ...
  • MongoDB模糊查询主要是晕倒的正则表达式new RegExp这个属性,可用模糊查询也可以是关键字查询 多条件模糊查询 async findArticle() { const queryData = this.ctx.query; let reg = new RegExp(queryData) let ...
  • 对于模糊查询,一般都是传关键字给后端,由后端来做。但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验。我目前的情况恰好是后台已经把全部数据给到前端了,所以就想用js对数据进行一...
  • 对于模糊查询,一般都是传关键字给后端,由后端来做。但是有时候一些轻量级的列表前端来做可以减少ajax请求,在一定程度上提高用户体验。我目前的情况恰好是后台已经把全部数据给到前端了,所以就想用js对数据进行一...

空空如也

空空如也

1 2 3 4 5
收藏数 88
精华内容 35
关键字:

js模糊查询关键字