JavaScript 搜索框自動提示

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

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>

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

CSS 代碼：

#myInput { background-image: url('https://static.json.com/images/mix/searchicon.png'); /* 搜索按鈕 */ 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-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 代碼：

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

在線演示

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