JQuery 模糊匹配

1、效果

2、代码

<style>
a{
	text-decoration:none;
}
.problem-li{
	display:block;
	width:200px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<div style="margin:20px;width:300px;">
	<input id="search" type="search" placeholder="请输入搜索内容"><br/><hr/>

	<div>静夜思  李白</div><hr/>
	<div class="problem-list">
		<a href='javascript:void(0);' class='problem-li'>
			<text>
				床前明月光，
			</text>
		</a>
		<a href='javascript:void(0);' class='problem-li'>
			<text>
				疑是地上霜。
			</text>
		</a>
		<a href='javascript:void(0);' class='problem-li'>
			<text>
				举头望明月，
			</text>
		</a>
		<a href='javascript:void(0);' class='problem-li'>
			<text>
				低头思故乡。
			</text>
		</a>
	</div>
</div>

<script>
//搜索操作
function searchList(){
	var searchText = $(this).val();//获取输入的搜索内容
    var $searchLi = "";//预备对象，用于存储匹配出的li
    if (searchText != "") {
    	 $('.problem-li').hide();//将原有的内容隐藏
		$('.problem-li').filter(":Contains(" + searchText + ")").show();	//获取所有匹配的li
	}else{
		$('.problem-li').show();//将原有的内容隐藏
	}
}
$('#search').on("keyup", searchList).trigger('keyup');
</script>