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

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

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

jquery实现简单的搜索功能的更多相关文章

  1. jQuery实现简单前端搜索功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  3. jquery一句话实现快速搜索功能

    jquery一句话实现快速搜索功能 //快捷搜索公共方法,其中obj为显示行的子节点function filter(obj, filterNameValue){ $(obj).hide().filte ...

  4. jquery实现简单的搜索

    对一个简单的ul列表进行输入框的搜索功能,搜索之前及搜索后显示效果如下: 用到的主要jquery技术有filter()和match()方法以及正则匹配,基础HTML+div设置: <div cl ...

  5. 利用jquery的contains实现搜索功能

    / jquery实现的搜索功能 $('#search_btn').on('click',function(){ var txt=$('#inputValue').val(); var value=$( ...

  6. jquery实现表格的搜索功能

    版权声明:作者原创,转载请注明出处! HTML代码如下: <input type="text" id="txt" value="" / ...

  7. Jquery实现简单到计时功能(setTimeout,setInterval)

    要实现一个标签或者按钮进行5秒到计时,非常简单,直接上代码: 倒计时:<span id="timeSpan1" style="color:red;font-size ...

  8. Javascript之简单按钮搜索功能

    学习JavaScript我觉得真实的感觉就是可以任意设计,“没有做不到只有想不到!”即使简单,但是任何东西的复杂都是从简单.基础开始的!这是我自己做的一个超简单的"搜索引擎"按钮, ...

  9. jquery实现页面的搜索功能

    $(function(){ $("input[type=button]").click(function(){ var txt=$("input[type=text]&q ...

随机推荐

  1. Oil Deposits（ hdu1241

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82828#problem/L Oil Deposits Time Limit:1000MS ...

  2. 韩老师CCNA学习笔记

    1.MSCONFIG服务里面可以选择隐藏Windows服务,就能看出程序安装的服务.即使显示已停止,仍可能在运行 2.命令行输入netstat -anbo ,显示当前连接和端口,数字显示,以及程序的路 ...

  3. label runat="server"

    <label id="lblWhiteIp_Text_Info" runat="server"></label> 后台对应的类型是 pr ...

  4. Nginx (限速）限制并发、限制访问速率、限制流量

    Nginx 限制并发访问速率流量,配置还是简单的,看下Nginx文档根据文中这三个模块对照看一下就可以,Nginx限速使用的是漏桶算法(感兴趣可以看下文末的参考资料),需要注意的是:当需要进行限速操作 ...

  5. Map-Amap：货运解决方案

    ylbtech-Map-Amap:货运解决方案 1.返回顶部 1. http://lbs.amap.com/smart/truck/ 2. 2.返回顶部 1. 2. 3.返回顶部   4.返回顶部   ...

  6. Javascript在ajax提交过程中页面显示加载中，请等待效果，并在提交过程中限制确定按钮防止多次提交，提交完成后，解除提交限制

    加载中,请等待div: <div id="load" class="center-in-center" style="display:none; ...

  7. static_cast关键字 dynamic_cast关键字

    前言 说起C++中的继承.多态.虚函数等概念,可能很多同学都有所了解,但是要说真正熟知的同学可能就不是很多了.最近在编程过程中了解到C++类型的层次转换(这就涉及到了多态和继承的相关概率),通常C语言 ...

  8. for,while,do while语句区别以及常见死循环格式

    1.三种循环语句的区别: do...while循环至少执行一次循环体. 而for,while循环必须先判断条件是否成立,然后决定是否执行循环体语句. for循环和while循环的区别: 如果你想在循环 ...

  9. cdh5.7 做完HA后hive 查询出现异常： expected: hdfs://nameservice

    异常信息如下: select * from b_pt_pr_customer_address_info limit 19; FAILED: SemanticException Unable to de ...

  10. ES6/ES2015核心内容 import export

    ES6/ES2015核心内容:https://www.cnblogs.com/doit8791/p/5184238.html Javascript ES6学习 import export  https ...