管理系统中需要实现导航列表的搜索功能，写了一个简单的小栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div class="search">
<!-- autocomplete="off" 可以关闭搜索的记忆功能-->
<input type="text" class="input" placeholder="输入关键字" autocomplete="off">
<input type="button" value="搜索" class="btn">
<ul>
<li>商品管理</li>
<li>商品类目</li>
<li>分类列表</li>
<li>商品标签</li>
<li>回收站</li>
</ul>
<ul>
<li>销售管理</li>
<li>订单中心</li>
<li>订单提成</li>
<li>批量打印</li>
<li>订单设置</li>
</ul>
</div>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
$('.search .btn').click(function() {
var val = $('.input').val();
if ($.trim(val)!="") {
$('.search ul li').removeClass('active').filter(":contains('"+ val +"');").addClass('active');
} else{
$('.search ul li').removeClass('active');
};
});
//设置回车键搜索
$('body').keydown(function(event) {
if (event.keyCode == "13") {
$('.search .btn').click();
};
});
})
</script>
</body>
</html>
关于搜索结果的样式可以自定义