js 實時監聽搜索內容

時間 2019-12-04

原文原文鏈接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table tr th,table tr td{
				padding: 10px;
			}
			table{
				margin-bottom: 20px;
			}
		</style>
	</head>
	<body>
	
		<input type="text" name="" id="input" value="" placeholder="請輸入查詢關鍵字" />
		<input type="button" name="" id="search" value="搜索" />
		<ul id="list">
			<li>哈哈哈</li>
			<li>啦啦啦</li>
			<li>六六六</li>
			<li>biubiu</li>
			<li>噗噗噗</li>
		</ul>
	</body>
</html>
&emsp;&emsp;<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
	// 實時監聽篩選
	var text = "";  
	setInterval(function(){  
	    text = $('#input').val();//獲取文本框輸入  
	    if($.trim(text) != ""){  
	            $("#list li").hide().filter(":contains('"+text+"')").show();  
	    }else{  
	        $('#list tr').show();//當刪除文本框的內容時，又從新顯示錶格全部內容  
	    }  
	},100);  
	
	//經過點擊按鈕開始篩選  
	$(function() {
		$('#search').click(function() {
			var text = $('#input').val(); //獲取文本框輸入  
			if($.trim(text) != "") {
				$("#table tr:not('#theader')").hide().filter(":contains('" + text + "')").show();
			}
		})
	});
</script>
</body>
</html>


複製代碼

相關標籤/搜索