学习JavaScript笔记

JavaScript 搜索框自动提示

介绍如何实现一个搜索框的提示功能，类似百度搜索。

HTML 代码：

 

 

A

 

Adele

 

Agnes

 

 

B

 

Billy

 

Bob

 

 

C

 

Calvin

 

Christina

 

Cindy

注意： 在实例中我们使用了 href="#"，实际应用中你需要把他替换为自己的 URL。

CSS 代码：

#myInput {

   background-image: url('https://static.runoob.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 代码：

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

 

   // 循环所有列表，查找匹配项

   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";

       }

   }

}