JavaScript 搜索框自动提示

 

本文为大家介绍如何实现一个搜索框的提示功能,类似百度搜索。

HTML 代码:

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

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

CSS 代码:

#myInput{background-image:url('https://static.runoob.com/images/mix/searchicon.png')/* 搜索按钮 */background-position:10px12px/* 定位搜索按钮 */background-repeat:no-repeat/* 不重复图片*/width:100%;     font-size:16px/* 加大字体 */padding:12px20px12px40px;     border:1pxsolid#ddd;     margin-bottom:12px}#myUL{/* 移除默认的列表样式 */list-style-type:none;    padding:0;    margin:0;}#myULli<
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信