仿百度自动补全搜索框效果(*附有源码下载)
Posted QW-lzm
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿百度自动补全搜索框效果(*附有源码下载)相关的知识，希望对你有一定的参考价值。
页面效果及代码，（源码在下面的下载链接）
<html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/semantic.css"> <script type="text/javascript" src="jquery-autocomplete/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-autocomplete/jquery.autocomplete.js"></script> <link rel="stylesheet" href="jquery-autocomplete/jquery.autocomplete.css"> <script type="text/javascript"> var go = [ "Baidu", "python", "java", "javascript", "Taobao", "Tom", "Yahoo","Alipay","Asp","Apple", "Lisp","php","Python" ]; $().ready(function () { $("#go").autocomplete(go); }); </script> </head> <body> <br><br><br><br><br><br><br><br><br><br> <div class="ui vertically padded page grid"> <div class=" column"> <form action="" method="post"> <div class="ui fluid action input"> <input type="text" placeholder="Search" name="" id="go"> <div id="content"></div> <button class="ui blue button" type="submit">自动补全</button> </div> </form> </div> </div> </body> </html>
jquery.autocomplete.css
.ac_results {
padding: 0px;
border: 1px solid WindowFrame;
background-color: Window;
overflow: hidden;
z-index: 99999;
}
/* www.bvbsoft.com */
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
float:left;
}
.ac_results iframe {
display:none;/*sorry for IE5*/
display/**/:block;/*sorry for IE5*/
position:absolute;
top:0;
left:0;
z-index:-1;
filter:mask();
width:3000px;
height:3000px;
}
.ac_results li {
clear:both;
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
font-size: 16px;
line-height: 16px;
overflow: hidden;
}
.ac_results li p{
float:left;
margin:0;
padding:0;
}
.ac_results li span{
margin:0;
padding:0;
float:right;
font-size: 12px;
}
.ac_loading {
background : Window url(\'../images/indicator.gif\') right center no-repeat;
}
.ac_over {
background-color: Highlight;
color: HighlightText;
}
*源码下载地址：
https://files.cnblogs.com/files/QW-lzm/input-auto.rar
以上是关于仿百度自动补全搜索框效果(*附有源码下载)的主要内容，如果未能解决你的问题，请参考以下文章