【皮皮哥资源网】JS如何实现模糊查询 模糊查询-键盘事件-关键字搜索

所谓模糊查询就是列表中的数据是否有符合关键字或某个字符。
实现的操作方法主要有两种:
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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@阿猫阿狗~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值