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();

}

})();

好啦，现在所有的代码都写完啦！

赶快打开浏览器，看看效果吧！

在这里，只是给大家提供一种思路，参考。

具体的实现，每个人都可以有不同的方法。

请大家赶快发挥想象，把你最想实现的功能，在电脑敲出来吧！