利用jquery通过某个关键字过滤列表，符合的句子变红，并排在前面

原创于 2009-06-02 11:35:25 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #CSS #脚本 #HTML #ViewUI

jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的jQuery插件，该插件能够在用户输入时实时搜索并高亮显示匹配项。通过一个文本框输入关键字，页面上的列表项会根据输入内容进行筛选，并将匹配的文字高亮显示。

html部分:

检索：<input type="text" name="index" id="index" />

<ul>
	<li>我的名字叫大笨</li>
	<li>我是一个中国人</li>
	<li>个人博客地址是www.deeka.cn</li>
	<li>学习jQuery有一年了</li>
	<li>最喜欢的动物是女人</li>
	<li>最讨厌的动物是和我抢女人的男人</li>

	<li>闲来无事帮你写个脚本</li>
	<li>不用谢，非谢不可就给我打1wRMB到我的帐号，回头把银行密码给你</li>
</ul>

js部分：

<script type="text/javascript">
<!--
$(function(){
	$('#index').keyup(function(){
		var index = $.trim($('#index').val().toString());
		if(index == ''){
			$('li').removeClass('focus');return false;
		}
		var parent = $('ul');
		$('li').removeClass('focus');
		$("li:contains('" + index + "')").addClass('focus').prependTo(parent);
	});
});
//-->
</script>

css部分：

<!--
.focus{ font-weight:700; color:red;}
-->