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

<!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. LOJ 2980 「THUSCH 2017」大魔法师——线段树

    题目:https://loj.ac/problem/2980 线段树维护矩阵. 然后是 30 分.似乎是被卡常了?…… #include<cstdio> #include<cstri ...

  2. windows平台使用MongoDB shell 来连接 MongoDB 服务器并创建数据库

    windows平台使用MongoDB shell 来连接 MongoDB 服务器并创建数据库 命令行进入MongoDB的bin目录运行mongod.exe mongod --dbpath c:\dat ...

  3. Luogu P1478 陶陶摘苹果

    Luogu P1478 陶陶摘苹果(升级版) 题目描述 又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与NOIp2 ...

  4. [CSP-S模拟测试]:weight（Kruskal+树链剖分）

    题目描述 给你一个$n$个点$m$条边的带边权的无向图(无重边,无自环),现在对于每条边,问你这条边的权值最大可以是多大,使得这条边在无向图的所有最小生成树中?(边权都是整数). 输入格式 第一行包含 ...

  5. js策略模式vs状态模式

    一.策略模式 1.定义:把一些小的算法,封装起来,使他们之间可以相互替换(把代码的实现和使用分离开来)2.利用策略模式实现小方块缓动 html代码: <div id="containe ...

  6. appium 链接真机后，运行代码，但是APP并没有启动

    要淡定,链接真机后,问题一下多出来这么多,还没有启动程序,就碰到接二连三的问题. 爽到家了.慢慢解决吧. 具体问题是这样的: # coding=utf-8from appium import webd ...

  7. jmeter添加自定义扩展函数之MD5加密

    1,打开eclipse,新建maven工程,在pom中引用jmeter核心jar包,具体请看---https://www.cnblogs.com/guanyf/p/10863033.html---,这 ...

  8. stl源码为什么要大量使用typedef?

    SGI源码download,<stl源码剖析>里展示了vector的部分源码: template <class T, class Alloc = alloc> class ve ...

  9. 3403. 题解【NOIP2013模拟】数列变换 (Standard IO)

    先看题目: Description 小X 看到堆成山的数列作业十分头疼,希望聪明的你来帮帮他.考虑数列A=[A1,A2,...,An],定义变换f(A,k)=[A2,A3,,,,.Ak,A1,Ak+2 ...

  10. selenium,webdriver爬取斗鱼主播信息 实操

    from selenium import webdriver import time from bs4 import BeautifulSoup class douyuSelenium(): #初始化 ...