jquery实现简单的搜索功能

管理系统中需要实现导航列表的搜索功能，写了一个简单的小栗子：

<!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>

关于搜索结果的样式可以自定义

posted @ 2017-07-19 16:00  moumou0213  阅读(818)  评论(0)  编辑  收藏  举报