利用javascript实现页面内容筛选

核心提示：在页面中，我们可以利用javascript实现很丰富的效果，利用javascript实现页面内容筛选，例如内容的筛选1. 我们来下面的页面图片看不清楚？请点击这里查看原图（大图），我们希望在关键字框中输入任何的关键字后，要监控到用户在关键字框输入的东西，那么就需要订阅一个事件，就能动态过滤掉下面的一些内容，如下图2.

在页面中，我们可以利用javascript实现很丰富的效果。例如内容的筛选

1. 我们来下面的页面

图片看不清楚？请点击这里查看原图（大图）。

我们希望在关键字框中输入任何的关键字后，就能动态过滤掉下面的一些内容。如下图

2. 首先，我们要知道，要监控到用户在关键字框输入的东西，那么就需要订阅一个事件，通常是keyup事件，就是按钮弹起的时候进行搜索

<script　type="text/javascript"　src="jquery-1.3.2-vsdoc.js">
</script>　
<script　language="javascript"　type="text/javascript">
　　　　$(function()　{
　　　　　　　　$("#search").keyup(function()　{
　　　　　　　　　　　　var　input　=　$(this).val();
　　　　　　　　　　　　if　(input.length　>　0)　{
　　　　　　　　　　　　　　　　$("li").css("display",　"none");　
　　　　　　　　　　　　　　　　$("li").filter(function(index)　{
　　　　　　　　　　　　　　　　　　　　return　$(this).text().indexOf(input)　>=　0;
　　　　　　　　　　　　　　　　}).css("display",　"block");
　　　　　　　　　　　　}
　　　　　　　　　　　　else
　　　　　　　　　　　　　　　　$("li").css("display",　"block");
　　　　　　　　});
　　　　});
</script>