1 <!--菜单搜索功能-->

  2 <!--先写静态页面-->

  3 <!DOCTYPE html>

  4 <html>

  5 <head>

  6     <meta charset="utf-8">

  7     <title>菜单搜索功能</title>

  8     <style>

  9        * {

 10         box-sizing: border-box;

 11        }

 12         .container{

 13          padding:10px;

 14

 15

 16

 17        }

 18        .dnav{

 19         float:left;

 20         width:30%;

 21         height:500px;

 22         padding:5px;

 23         background:grey;

 24

 25       }

 26       .dnav ul{

 27            list-style-type:none;

 28            margin:10px;

 29            padding:0px;

 30       }

 31        .dnav ul li{

 32            width:80px;

 33            height:20px;

 34

 35       }

 36      .dnav ul li a{

 37            backgrxound-color: #f6f6f6;

 38            padding: 10px;

 39            margin:20px;

 40            text-decoration: none;

 41            font-size: 18px;

 42            color: black;

 43            display: block

 44

 45       }

 46       .dnav ul li a:hover{

 47            color: white;

 48

 49

 50       }

 51      .dnav input{

 52           width: 100%;

 53           font-size: 18px;

 54           padding: 11px;

 55           border:1px solid #ddd;

 56       }

 57       .content{

 58         float:left;

 59         width:70%;

 60

 61         padding:5px;

 62         height:500px;

 63         background:lightgrey;

 64

 65       }

 66

 67

 68     </style>

 69 </head>

 70 <body>

 71    <div class="container">

 72 <!--左右布局的实例-->

 73      <div class="dnav">

 74        <nav class="nav">

 75            <h2>导航菜单<h2>

 76            <input placeholder="请输入关键字"  id="mysearch" onkeyup="search()">

 77            <ul>

 78                <li><a href="#">HTML</a></li>

 79                <li><a href="#">CSS</a></li>

 80                <li><a href="#">JavaScript</a></li>

 81                <li><a href="#">jQuery</a></li>

 82                <li><a href="#">bootstrap</a></li>

 83                <li><a href="#">angular</a></li>

 84                <li><a href="#">vue</a></li>

 85                <li><a href="#">node.js</a></li>

 86            </ul>

 87         </nav>

 88      </div>

 89      <div class="content">

 90        前端要求学习的各种知识 内容

 91      </div>

 92    </div>

 93 <script>

         //功能：主要是过滤，通过转换为大写toUpperCase,然后用indexOff来查询返回字符串位子，无就返回-1

 94     function search(){

 95        var input = document.getElementById("mysearch").value;

 96        var li= document.getElementsByTagName("li");

 97        var fliter=input.toUpperCase();

 98        for(var i=0;i<li.length;i++){

 99            if(li[i].innerHTML.toUpperCase().indexOf(fliter)>-1){

100               li[i].style.display="block";

101    }else{

102       li[i].style.display="none";

103    }

104

105 }

106

107   }

108 </script>

109 </body>

110 </html>

JS搜索菜单实现的更多相关文章

  1. JS树形菜单

    超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的 ...

  2. js矩阵菜单或3D立体预览图片效果

    js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...

  3. 顶 兼容各种浏览器js折叠菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单

    这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...

  5. 适合移动手机使用的js环形菜单特效插件

    blooming-menu是一款适合在移动手机上使用的js环形菜单插件.该环形菜单提供了众多的參数,通过结合CSS3动画制作出效果很炫酷的圆形菜单展开和隐藏动画效果. 以下是这个圆形菜单菜价的可用參数 ...

  6. chosen.jquery.js 搜索框只能从头匹配的解决思路+方法

    chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...

  7. jquery.smint.js 页面菜单浮动之谷歌浏览器异常

    jquery.smint.js 做公司项目时,谷歌测试,页面向下拉,刷新后,导航栏菜单与顶部距离发生变动,并不在设置的relative元素top下固定像素 我的relative元素的高为80,然后在j ...

  8. js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用

    做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...

  9. js侧边菜单

    目标 实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单. 大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮 ...

随机推荐

  1. HTTP 协议基础及发展历史

    一. 5层网络模型介绍 低三层 物理层:主要作用是定义物理设备如何传输数据. 数据链路层:在通信的实体间建立数据链路连接. 网路层:为数据在结点之间传输创建逻辑链路. 传输层: 想用户提供可靠的端到端 ...

  2. SELinux 入门

    几乎可以肯定每个人都听说过 SELinux (更准确的说,尝试关闭过),甚至某些过往的经验让您对 SELinux 产生了偏见.不过随着日益增长的 0-day 安全漏洞,或许现在是时候去了解下这个在 L ...

  3. 光纤收发器TR-962D/932D的面板指示灯及开关代表的含义？

    指示灯含义说明:POWER(绿色):“常亮”表明光纤收发器处于通电状态:LFP指示灯: “常亮”表明LFP功能开启,“常灭”表示LFP功能关闭:FX_LINK/ACT(绿色):“常亮”表明光纤端口连接 ...

  4. request获取各种路径总结、页面跳转总结。

    页面跳转总结 JSP中response.sendRedirect()与request.getRequestDispatcher().forward(request,response)这两个对象都可以使 ...

  5. DEDE 修改后台图集上传单个图片的大小限制

    默认情况下,DEDE图集中单个图片大小限制在2M以内,而有时我们需要上传一个2M以上的文件,这是只要修改几个文件就可以实现了. 一.需要修改php.ini这个文件,我们必须保证PHP的配置中允许上传一 ...

  6. React开发实时聊天招聘工具 -第六章 登陆注册(2)

    1.bodyParser和cookieParser:   const bodyParser = require('body-parser') const cookieParser = require( ...

  7. react-native flatlist setState修改数据视图不刷新解决方案

    给flatlist添加属性:handleMethod = {({viewableItems}) => this.handleViewableItemsChanged(viewableItems) ...

  8. 推荐《深入浅出深度学习原理剖析与python实践》PDF+代码

    <深入浅出深度学习原理剖析与Python实践>介绍了深度学习相关的原理与应用,全书共分为三大部分,第一部分主要回顾了深度学习的发展历史,以及Theano的使用:第二部分详细讲解了与深度学习 ...

  9. python3 类、对象的基础概念

    类:具有相同特性和方法的抽象概念称为类 对象:从类中具体描述的一个事物称为对象 类和对象的关系:类是对象的抽象概念,对象是类的具体实例 class test001: #创建类 def __init__ ...

  10. 紫书 例题 9-14 UVa 1218 （树形dp）

    这道题有个初始值设成1e9, 然后这个值是要加很多次的,然后就会溢出变成负数, 然后就一直WA, 找这个bug找了一个小时--以后不能随便这样设那么大, 要考虑会不会加很多次然后溢出. 讲一下思路. ...