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

<!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. python练习题之全选框全不选反选

    功能 实现分为两大部分: 第一body 部分,1,通过<li>无序列表标签实现选项的基本样式,通过input的checkbox标签实现里面的复选框功能.用到了标签的嵌套.然后选项的js方法 ...

  2. Understanding identities in IIS

    Understanding identities in IIS https://support.microsoft.com/en-my/help/4466942/understanding-ident ...

  3. Apache + Tomcat 集群的配置

    公司最近新接了一个项目,客户要求WEB SERVER 必须是APACHE,,由于之前的项目一直都是NGINX,,无奈啊,,由于对方的IT又是在三哥的过度,经过一番的争执只能顺应三哥三姐的要求..

  4. thinkphp5 redis使用

    参数参考位置:thinkphp\library\think\cache\driver class Redis extends Driver { protected $options = [ 'host ...

  5. DT时代，如何成为十字复合型数据分析师

    DT时代,如何成为十字复合型数据分析师 当前社会正从IT到DT智能时代,传统行业嫁接互联网,产生的是加法效应:大数据创新驱动,产生的是乘法效应,价值呈指数递增.DT时代拼的是人才和创新价值的能力,拼的 ...

  6. 准确获取URL地址参数

    http://localhost:8080/?state=app&code=021axrkH0Il7Df2bEQkH0DMjkH0axrkP 准确获取code的值 getQueryString ...

  7. java并发编程之美-阅读记录5

    java并发包中的并发List 5.1CopeOnWriteArrayList 并发包中的并发List只有CopyOnWriteArrayList,该类是一个线程安全的arraylist,对其进行的修 ...

  8. 58.Partition Equal Subset Sum（判断一个数组是否可以分成和相等的两个数组）

    Level:   Medium 题目描述: Given a non-empty array containing only positive integers, find if the array c ...

  9. Windows IIS PHP7 连接 SQLServer 2012

    下载 php7 对 SQL Server 的扩展 https://www.microsoft.com/en-us/download/details.aspx?id=20098 下载后 安装到一个 目录 ...

  10. Spring学习笔记（10）——方法注入

    引用 在大部分情况下,容器中的bean都是singleton类型的.如果一个singleton bean要引用另外一个singleton bean,或者一个非singleton bean要引用另外一个 ...