【皮皮哥资源网】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>