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侧边菜单
目标 实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单. 大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮 ...
随机推荐
- installp 软件的4种状态
安装和维护LPP软件 installp 对包提供了如下四种主要的操作: Apply Commit Reject Remove webes.4.0.0.1 commited webes.4. ...
- C#一些延时函数
sleep延时方法: System.Threading.Thread.Sleep(); //毫秒 在C#窗口程序中,如果在主线程里调用Sleep,在Sleep完成之前, 界面呈现出假死状态,不能响应任 ...
- ES6学习笔记（一）新的变量定义命令let和const
1.一些历史 ES6(ECMAScript 6.0)是 JavaScript 语言的新一代标准,于2015 年 6 月正式发布,距今已经4年了,它的目标,是使得 JavaScript 语言可以用来编写 ...
- 关于Echarts表格插件的使用
<template> <div :style="{height:height,width:width}"></div> </templat ...
- rman 备份并异机恢复
1.RMAN 备份脚本 RUN { CONFIGURE RETENTION POLICY DAYS; CONFIGURE CONTROLFILE AUTOBACKUP ON; CONFIGURE CO ...
- 如何批量telnet查看否开放指定端口
由于机房搬迁,需要重新telnet看看网络是否联通 [weblogic@pays03pre_BankVerify /]$ telnet 172.29.1.159 22Trying 172.29.1.1 ...
- python 发送邮件 <QQ+腾讯企业邮箱>
一.使用QQ邮箱或者腾讯企业邮箱 python 发送邮件属于网络编程方向的,在工作中,我需要经常用邮件来检测我的程序运行状况.使用起来十分方便,这里我就用腾讯企业邮箱作为我的收发邮箱来使用. 使用py ...
- jquery正则匹配URL地址
JQuery代码: var regexp = /((http|ftp|https|file):\/\/([\w\-]+\.)+[\w\-]+(\/[\w\u4e00-\u9fa5\-\.\/?\@\% ...
- Linux下安装Go环境
登录Linux Mac或Linux的用户可以用命令ssh root@xxx.xxx.xxx.xxx登录主机Window的用户可以使用SecureCRT登录主机虚拟机用户直接打开你的虚拟机 安装Go环境 ...
- Virtual Reality: Immersive Yourself In Your 3D Mockup
ESI's Virtual Reality software solution IC.IDO is an exceedingly powerful immersive engineering solu ...