html开发列表搜索,前端实例练习 - 可搜索列表
可搜索列表
初衷:很多人在初学前端的时候都会问,“如何入门前端?”
同为在前端学习道路上,奋力追赶的一员,本人对于目前网络上所能看到的 “入门级” 的教材并不太满意。学习一门新知识,实例是尤其重要的。在这里本人整理了目前页面上常见功能实现的具体实例。愿能为大家提供一些帮助。
希望能够与大家互相分享,共同进步。
HTML部分
- A
- Adele
- Agnes
- B
- Billy
- Bob
- C
- Calvin
- Christina
- Cindy
CSS 部分
#myInput {
background-image: url('http://www.freeiconspng.com/uploads/search-icon-png-2.png'); /* 背景为放大镜图标 */
background-size: 18px; /*大小和内容框大小一样*/
background-position: 10px 12px; /* 背景图片定位 */
background-repeat: no-repeat; /* 图片不重复 */
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myUL {
/*清除默认样式*/
list-style: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px; /*消除双重border*/
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block; /*变为块级元素,以来填充li*/
}
#myUL li a.header {
background-color: #e2e2e2;
cursor: default; /*使光标看上去,a.header为不可点击项*/
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
JavaScript 部分
(function(){
/*搜索函数*/
function mySearch() {
var inputBox = document.getElementById('myInput'),
input = inputBox.value.toUpperCase(), /*搜索输入变为大写*/
ul = document.getElementById("myUL"),
li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0]; /*获得
里的*/
if (a.innerHTML.toUpperCase().indexOf(input) > -1) { /*搜索是否
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
var inputBox = document.getElementById('myInput');
/*每当键盘按键按下后抬起,都调用一次函数*/
inputBox.onkeyup = function() {
mySearch();
}
})();
好啦,现在所有的代码都写完啦!
赶快打开浏览器,看看效果吧!
在这里,只是给大家提供一种思路,参考。
具体的实现,每个人都可以有不同的方法。
请大家赶快发挥想象,把你最想实现的功能,在电脑敲出来吧!
html开发列表搜索,前端实例练习 - 可搜索列表相关推荐
- ul 原点显示_web前端开发学习教程,CSS HTML - ul li列表原点如何相连
原标题:web前端开发学习教程,CSS HTML - ul li列表原点如何相连 目前我列出两个方案,很详细,希望可以帮助到有疑问的朋友. 方案一: html 参与考试<第一期模拟考试> ...
- 【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> ...
- 【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> & ...
- 北风网web前端开发培训课程 web前端开发实例视频教程下载
web前端开发视频教程 Web前端开发工程师培训 零基础Web前端开发工程师高端培训配项目开发(月薪过万的最佳选择) 课程讲师:叮咚 课程分类:套餐推荐 适合人群:初级 课时数量:305课时 用到技术 ...
- 前端开发:自定义搜索框(含联想搜索)
在前端开发过程中,搜索功能是比较常见的功能,也是在项目开发过程中比较常见的需求.搜索框功能常用的几种需求也都是大同小异,但是实用的搜索框可以作为一个例子来写是很有必要的,那么本篇博文就来分享一下前端开 ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
- 【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
- 【前端实例代码】Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果~前端开发网页设计基础入门教程~适合初学者~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果!前端开发网页设计基础入门教程!适合初学者~超简单~ 效果图: 完整代码: <!DOCTYPE ht ...
- 【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE htm ...
最新文章
- “年轻”有价值,才是本钱
- 基于Attention机制的轻量级网络架构以及代码实现
- 四位专家谈:数字医学中的因果关系
- Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)
- 【Python基础】Github标星4.7k,每天推送一个python小实例的Python库
- 谷胱甘肽口服、舌下含服、NAC对照实验
- 动态规划——买卖股票的最好时机(Leetcode 121)
- Cocos2dx源码记录(6) CCTrianglesCommand
- AMD授权GPU给Intel?苏姿丰:没有的事
- HDU2098 分拆素数和【筛选法】
- ARC072/ABC059
- 2020中国数据智能产业图谱1.0版发布丨数据猿产业全景图
- wps里的html怎么保存,WPS网页复制保存文档文字技巧
- FreeMarker FTL标签
- 微信小程序实现退款,Java版。
- java 接口 实验报告_java-接口练习实验报告
- C++ 设计模式 适配器模式(中英翻译, Win-Linux翻译)
- 量化交易奇才大卫·哈丁的投资之路
- CSAPP实验1:Data Lab笔记
- leetcode No7. Reverse Integer
热门文章
- PyTorch学习笔记(三):PyTorch主要组成模块
- 人工智能和大数据两者有什么联系
- 视频监控物联卡有什么作用
- python控制mt4自动交易软件排名_股票自动交易软件排名
- linux7保存防火墙规则,centos7中没有service iptables save指令来保存防火墙规则
- 通过思科构造局域网_从Cisco DNA中心的管理的和设置的非结构Catalyst 9800无线局域网控制器...
- mysql无法识别双引号_sqlite3迁移mysql问题集合攻略
- PySpark︱pyspark.ml 相关模型实践
- SSD+caffe︱Single Shot MultiBox Detector 目标检测(一)
- Exception处理