中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：JavaScript Lightbox 下一篇：JavaScript 表格數(shù)據(jù)搜索

JavaScript 搜索框自動(dòng)提示

本文為大家介紹如何實(shí)現(xiàn)一個(gè)搜索框的提示功能，類似百度搜索。

HTML 代碼：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索..."> <ul id="myUL"> <li><a href="#" class="header">A</a></li> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#" class="header">B</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#" class="header">C</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul>

注意： 在實(shí)例中我們使用了 href="#"，實(shí)際應(yīng)用中你需要把他替換為自己的 URL。

CSS 代碼：

#myInput { background-image: url('https://static.json.com/images/mix/searchicon.png'); /* 搜索按鈕 */ background-position: 10px 12px; /* 定位搜索按鈕 */ background-repeat: no-repeat; /* 不重復(fù)圖片*/ width: 100%; font-size: 16px; /* 加大字體 */ padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { /* 移除默認(rèn)的列表樣式 */ list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; /* 鏈接添加邊框 */ margin-top: -1px; background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block; } #myUL li a.header { background-color: #e2e2e2; cursor: default; } #myUL li a:hover:not(.header) { background-color: #eee; }

JavaScript 代碼：

function myFunction() { // 聲明變量 var input, filter, ul, li, a, i; input = document.getElementById('myInput'); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName('li'); // 循環(huán)所有列表，查找匹配項(xiàng) for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } }

提示： 如果你需要區(qū)分大小寫可以移除 toUpperCase() 方法。

在線演示

上一篇：JavaScript Lightbox 下一篇：JavaScript 表格數(shù)據(jù)搜索