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

<!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. 【靶场练习_sqli-labs】SQLi-LABS Page-2 (Adv Injections)

    Less-21:括号+单引号绕过+base64cookie编码 总感觉我已经把sql注入做成代码审计了:P <?php //including the Mysql connect paramet ...

  2. [CSP-S模拟测试]:平均数（二分答案+归并排序）

    题目描述 有一天,小$A$得到了一个长度为$n$的序列.他把这个序列的所有连续子序列都列了出来,并对每一个子序列都求了其平均值,然后他把这些平均值写在纸上,并对它们进行排序,最后他报出了第$k$小的平 ...

  3. 用 Flask 来写个轻博客 (21) — 结合 reCAPTCHA 验证码实现用户注册与登录

    目录 目录 前文列表 扩展阅读 添加账户管理蓝图 新建控制器蓝图 新建表单 新建蓝图 main 的视图函数 新建模板 页面效果 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Fla ...

  4. getAttribute 与getParmeter 区别

    1.getAttribute是取得jsp中 用setAttribute設定的attribute 2.parameter得到的是string:attribute得到的是object 3.request. ...

  5. nginx 虚拟主机+反向代理+负载均衡

    nginx是一款免费.开源的http服务器,它是由俄罗斯程序设计师开发的,官方测试,nginx能支撑5万的并发量,主要功能有虚拟主机.反向代理和负载均衡等. nginx配置 # 全局块 ... # e ...

  6. web测试点

    一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数字.空或者空格.特殊字符“~!@#￥%……&*?[]{}”特别要注意单引号和&符号. 禁止直接输入特殊字符时, ...

  7. maven项目使用tomcat启动报错：Server Tomcat v8.5 Server at localhost failed to start

    背景说明:1)该项目为maven项目,使用的maven的本地仓库里有不少之前使用过下载的jar包: 2)从svn下载该项目后,无报错情况: 3)部署到tomcat启动报错 如下 : 4)在网上搜索了很 ...

  8. Flask-Scrip

    介绍及安装 Flask-Script是一个让你的命令行支持自定义命令的工具,它为Flask程序添加一个命令行解释器.可以让我们的程序从命令行直接执行相应的程序. 安装 pip install Flas ...

  9. java中延迟任务的处理方式

    1.利用延迟队列 延时队列,第一他是个队列,所以具有对列功能第二就是延时,这就是延时对列,功能也就是将任务放在该延时对列中,只有到了延时时刻才能从该延时对列中获取任务否则获取不到…… 应用场景比较多, ...

  10. 安装gmpy2

    本来只想做个RSA的题,结果环境就搭了好久 首先想用 pip install gmpy2 发现缺东西,要安装gmp,mpfr,mpc 安装: mkdir -p $HOME/src mkdir -p $ ...