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

﹏ヽ暗。殇╰゛Y 2023-02-18 03:04 180阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center]

<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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center 1]

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200831163923316.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20200831163940839.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1NzQxMDcx,size_16,color_FFFFFF,t_70#pic_center