本文为大家介绍如何实现一个搜索框的提示功能,类似百度搜索。
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<