JS搜索菜单实现
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搜索菜单实现的更多相关文章
- JS树形菜单
超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的 ...
- js矩阵菜单或3D立体预览图片效果
js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...
- 顶 兼容各种浏览器js折叠菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单
这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...
- 适合移动手机使用的js环形菜单特效插件
blooming-menu是一款适合在移动手机上使用的js环形菜单插件.该环形菜单提供了众多的參数,通过结合CSS3动画制作出效果很炫酷的圆形菜单展开和隐藏动画效果. 以下是这个圆形菜单菜价的可用參数 ...
- chosen.jquery.js 搜索框只能从头匹配的解决思路+方法
chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...
- jquery.smint.js 页面菜单浮动之谷歌浏览器异常
jquery.smint.js 做公司项目时,谷歌测试,页面向下拉,刷新后,导航栏菜单与顶部距离发生变动,并不在设置的relative元素top下固定像素 我的relative元素的高为80,然后在j ...
- js搜索框 js仿百度搜索 js下拉框 jQuery.Autocomplete使用
做了一个网站,需要根据文本框的输入模糊搜索数据库内容给出提示供用户选择,就找到了jQuery.Autocomplete 效果如下图: 该插件托管在github上,具体地址:https://github ...
- js侧边菜单
目标 实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单. 大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮 ...
随机推荐
- css3 边框阴影效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jq 监听键盘事件
其实这个也是挺简单的一些东西.也就是几个参数: 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup( ...
- Activiti工作流（3）：activiti核心API
ProcessEngine 说明: 1) 在Activiti中最核心的类,其他的类都是由他而来. 2) 产生方式:ProcessEngine defaultProcessEngine = Pr ...
- 淘宝在hbase中的应用和优化
本文来自于NoSQLFan联合作者@koven2049,他在淘宝从事Hadoop及HBase相关的应用和优化. 对Hadoop.HBase都有深入的了解,本文就是其在工作中对HBase的应用优化小结, ...
- Hive里的分区、分桶、视图和索引再谈
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...
- 分享一个js加密的几种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- c# List集合学习
1---集合,可以理解成容器 泛型集合 非泛型集合2---使用集合用到的命名空间 using System.Collections.Generic;3---集合是如何来的?集合的前辈是数组,数组在内存 ...
- 修改url中某个参数
function changeURLArg(url,arg,arg_val){ var pattern=arg+'=([^&]*)'; var replaceText=arg+'='+arg_ ...
- SQL insert 主键冲突
待总结 https://blog.csdn.net/JavaCoder_juejue/article/details/82313891 https://blog.csdn.net/a772304419 ...
- vue2细节变化的用法
1.v-el和v-ref合并为一个属性:ref 原来:v-el:my-element 现在: ref="myElement", v-ref:my-component 变成了这样: ...