<! 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="Please enter your query keyword" />
		<input type="button" name="" id="search" value="Search" />
		<ul id="list"> < li > haha < / li > < li >!!! < / li > < li > 666 < / li > < li > biubiu < / li > < li > poop-poop poof < / li > < / ul > < / body > < / HTML > & emsp; &emsp; <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript"> // Real-time listener filter var text ="";  
	setInterval(function(){  
	    text = $('#input').val(); // Get text box inputif($.trim(text) ! =""){  
	            $("#list li").hide().filter(":contains('"+text+"')").show();  
	    }else{$('#list tr').show(); }},100); // Start filtering $(by clicking the buttonfunction() {$('#search').click(function() {
			var text = $('#input').val(); // Get text box inputif($.trim(text) ! ="") {$("#table tr:not('#theader')").hide().filter(":contains('" + text + "')").show(); }})}); </script> </body> </html>Copy the code