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. C/C++(C++拷贝构造器,赋值运算符重载)

    拷贝构造器 由己存在的对象,创建新对象.也就是说新对象,不由构造器来构造,而是由拷贝构造器来完成.拷贝构造器的格式是固定的. class 类名 { 类名(const 类名 & another) ...

  2. UVC和V4L2的关系（转载）

    UVC是一种usb视频设备驱动.用来支持usb视频设备,凡是usb接口的摄像头都能够支持 V4L2是Linux下的视频采集框架.用来统一接口,向应用层提供API UVC: USB video clas ...

  3. iscsi共享存储的简单配置和应用

    1.环境介绍 SCSI(Small Computer System Interface)是块数据传输协议,在存储行业广泛应用,是存储设备最基本的标准协议.从根本上说,iSCSI协议是一种利用IP网络来 ...

  4. jquery点击弹框外层关闭弹框

    $(document).bind("click",function(e){            if($( e.target ).closest(".game-cont ...

  5. 【Henu ACM Round#17 E】Tree Construction

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 做这题之前先要知道二叉排序树的一个性质. 就是它的中序遍历的结果就是这个数组升序排序. (且每个节点的左边的节点都是比这个节点的值小 ...

  6. 洛谷 P1324 矩形分割

    P1324 矩形分割 题目描述 出于某些方面的需求,我们要把一块N×M的木板切成一个个1×1的小方块. 对于一块木板,我们只能从某条横线或者某条竖线(要在方格线上),而且这木板是不均匀的,从不同的线切 ...

  7. OpenCV —— 矩阵操作

    多通道的矩阵 —— 通道是连续的!! 要将指向该数据类型的指针移动到下一通道,我们只需要将其增加1.如果想访问下一个“像素”或者元素集,则需要一定的偏移量 矩阵的step元素是矩阵中行的长度,单位为字 ...

  8. kafka删除主题

    hdp集群默认不能删除kafka主题,如果要删除,需要在ambari上进行配置,将enable delete设置为true.

  9. 2018 java实训总结（时间戳&&主键）

    java实训题目:源管理系统. 答辩的时候被老师怼了以下几个的地方: 1.主键改变了 2.没时间戳却说自己的程序里有先后(这就是老师迂腐了,主键自增可以间接反馈出他加入的早晚,即使主键做出了改变但只是 ...

  10. [TypeScript] Make Properties and Index Signatures Readonly in TypeScript

    TypeScript 2.0 introduced the readonly modifier which can be added to a property or index signature ...