js模糊搜索

最新推荐文章于 2024-07-08 21:41:31 发布

QQ帝国

最新推荐文章于 2024-07-08 21:41:31 发布

阅读量1.6k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/QQ_Empire/article/details/81704232

版权

JavaScript 专栏收录该内容

121 篇文章 2 订阅

订阅专栏

方法一：jQuery根据文本框输入实时模糊查询

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <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="请输入查询关键字"/>

</body>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <script>
     	var text = "";
		//实时筛选，不用点击按钮
		setInterval(function(){
			text = $('#input').val();//获取文本框输入
			if($.trim(text) != ""){
					$("#table tr:not('#theader')").hide().filter(":contains('"+text+"')").show();
			}else{
				$('#table tr').show();//当删除文本框的内容时，又重新显示表格所有内容
			}
		},100);

  </script>
</html>

实现效果：

初始状态

文本框内输入文字“三”

方法二：新增“搜索”按钮，只有当点击“按钮”后，显示查询结果。

HTML代码：与第一种方法相比，仅仅多了一个按钮

		<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="请输入查询关键字"/>
		<input type="button" name="" id="search" value="搜索" />

// 通过点击按钮开始筛选
		$(function(){
			$('#search').click(function(){
				var text = $('#input').val();//获取文本框输入
				if($.trim(text) != ""){
					$("#table tr:not('#theader')").hide().filter(":contains('"+text+"')").show();
				}
			})
		});

实现效果：

初始状态：