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. @Html.Raw() 方法输出带有html标签的字符串

    @Html.Raw() 方法输出带有html标签的字符串,如:@Html.Raw("<div style='color:red'>输出字符串</div>") ...

  2. 分享js中的 sort 另一种用法

    // 看上去正常的结果: ['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft']; // apple排 ...

  3. POJ 1610 Count the Colors

    Count the Colors Time Limit: 2 Seconds      Memory Limit: 65536 KB Painting some colored segments on ...

  4. route---设置Linux内核中的网络路由表

    route命令用来显示并设置Linux内核中的网络路由表,route命令设置的路由主要是静态路由.要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两个网络的网关来实现. 在L ...

  5. Windows server 2016 解决“无法完成域加入，原因是试图加入的域的SID与本计算机的SID相同。”

    使用克隆的系统时,加域是出现如下问题.“无法完成域加入,原因是试图加入的域的SID与本计算机的SID相同.” 问题原因:Windows使用SID来表示所有的安全对象(security principa ...

  6. 多路I/O转接之select模型

    I/O复用使得程序可以同一时候监听多个文件描写叙述符.这对提高程序的性能至关重要.通常,网络程序同一时候处理或者监听多个socket文件描写叙述符的时候可以考虑使用I/O复用模型. 值得强调的是.I/ ...

  7. 【分享】School Rumble校园迷糊大王PSP姐姐事件+PS2游戏第一,二学期【带VNR翻译教程】

    7/22/2014 TUE   为「スクールランブル 姉さん事件です」加入了BANDAI PSP的引擎. 校园迷糊大王PSP姐姐事件 下载地址1:http://www.bego.cc/file/689 ...

  8. Selenium_WebDriver操作iFrame日历框和复选框_Java

    iFrame日历框 页面上遇到iFrame元素时,先用findElement找到这个iFrame元素,然后再WebDriver.switchTo().frame(calFrame).在iFrame里操 ...

  9. vue-cli 搭建

    一.安装vue-cli 安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装.你可以在命令行工具里输入npm -v  检测你是否安装了npm和版本情况.出现版 ...

  10. ASP.NET WebAPI RC 竟然不支持最常用的json传参

    壮士断腕(WCF Web API),为的是 ASP.NET Web API 的横空出世,再加上它的开放(开源),于是对之产生了一点点痴情,并写下了HttpClient + ASP.NET Web AP ...