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侧边菜单
目标 实现一个侧边栏菜单,最多二级,可以收起展开.用于系统左侧的主菜单. 大多数系统都会有这样的菜单,用于导航功能,切换到不同的操作页面.在单页应用系统中,菜单一般是固定在左侧,分组节点上配图标,高亮 ...
随机推荐
- Codefroces 731C. Socks
C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...
- Network Stack
Network Stack 目录 1 Overview 2 Code Layout 3 Anatomy of a Network Request (focused on HTTP) 3.1 URLRe ...
- 关于IDEA无法完整显示项目文件结构
今天发现一个奇怪的问题,就是我从本地导入了文件,明明已经成功了,但是在我的项目结构里面就是不显示,然而点击目录, 又能打开相应的文件,如图所示: 其实这个打开的只是包文件,只需要如下图操作即可:
- 【Django】ORM操作#1
目录 一.介绍 概念 由来 优势 劣势 总结 二.Django中的ORM Django项目使用MySQL Model 快速入门 1. AutoField 2. IntegerField 3. Char ...
- 紫书 例题 9-2 UVa 437 ( DAG的动态规划）
很明显可以根据放不放建边,然后最一遍最长路即是答案 DAG上的动态规划就是根据题目中的二元关系来建一个 DAG,然后跑一遍最长路和最短路就是答案,可以用记忆化搜索的方式来实现 细节:(1)注意初始化数 ...
- SpringBoot 静态资源 加载位置
1.配置自定义拦截器 /** * Copyright (C), 2017-2018, XXX有限公司 * FileName: WebConfig * Author: 丶Zh1Guo * Date: 2 ...
- 菜鸟nginx源代码剖析数据结构篇（七） 哈希表 ngx_hash_t（下）
菜鸟nginx源代码剖析数据结构篇(七) 哈希表 ngx_hash_t(下) Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:B ...
- Cloudera Hue是什么?
Hue是cdh专门的一套web管理器,它包括3个部分hue ui,hue server,hue db.hue提供所有的cdh组件的shell界面的接口.你可以在hue编写mr,查看修改hdfs的文件 ...
- 记录一个mybatis编写xml遇到的错误：java.lang.unsupportedOperationException
写完xml里的sql在执行xml中的sql时报错,经过排查找到问题出在方法中的resultType这个属性的类型上 如图所示:只需要将sortedSet改为set集合里所存储的对象的类型即可. 这里我 ...
- Linux MTD 子系统
一.MTD子系统概述 MTD(Memory Technology Device, 内存技术设备)是用于访问memory 设备 (ROM.FLASH)的Linux子系统. 主要目的是为了使新的memor ...