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. codeforces 701 B. Cells Not Under Attack

    B. Cells Not Under Attack time limit per test 2 seconds memory limit per test 256 megabytes input st ...

  2. swing导出html到excel

    swing导出html到excel 1  ShowCopDetal package com.product; import java.awt.BorderLayout; import java.awt ...

  3. 目前常见的三种SQL分页方式：

    --top not in方式 select top 条数 * from tablename where Id not in (select top 条数*页数 Id from tablename) - ...

  4. Codefroces B. Hamming Distance Sum

    Genos needs your help. He was asked to solve the following programming problem by Saitama: The lengt ...

  5. JSP页面的静态包含和动态包含的区别与联系

    JSP中有两种包含: 静态包含:<%@include file="被包含页面"%> 动态包含:<jsp:include page="被包含页面" ...

  6. Vue 项目搭建 与 git 连接

    整理一下::::: git 方面: -----------注册------登录--------就不用写了 这里使用的是码云: 1. 进入个人中心添加项目. 2.添加完项目添加SSH公钥.(在设置里面) ...

  7. CrawlSpider爬取读书网

    crawlspider用于定义一些规则用于提取页面符合规则的数据,然后继续爬取. 一.开始一个读书网项目 scrapy startproject 项目名称cd 项目名称/项目名称/spidersscr ...

  8. vue.js 第一课：实例化vue

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. C# 操作Excel常见错误

    1.未在本地注册 string strConn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + FilePath + &qu ...

  10. vue --- 全局守卫

    vue2.0 实现导航守卫(路由守卫) 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navi ...