管理系统中需要实现导航列表的搜索功能，写了一个简单的小栗子：
<!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>
关于搜索结果的样式可以自定义