页面效果及代码，（源码在下面的下载链接）
<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
时间： 2024-08-27 03:03:48