一款JQuery+jsonp的自动补全插件,只要在输入框里输入任意内容,都会有相关的信息列表显示在输入框下面,点击可以选择列表信息的内容。
页面的head部分,需简单设置页面元素的样式,代码如下:
body{
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
h1{
font-weight: 500;
}
#word{
position: absolute;
z-index: 99;
width: 145px;
height: auto;
background-color: white;
border: black solid 1px;
display: none;
}
.click_work{
padding-bottom: 8px;
font-weight:lighter;
font-size: 13px;
cursor:pointer;/*鼠标放上变成小手*/
}
.click_work:hover{
color: orange;
background-color: gray;
}
.error{
color: gray;
cursor:pointer;/*鼠标放上变成小手*/
}
页面的body部分,下设置好标题文字和一个放入输入框的table表格,代码如下:
<center>
<h1>自动补全插件</h1>
</center>
<table align="center" cellspacing="0" cellpadding="10" border="0" >
<tr>
<td style="position: relative;">
<input id="text" type="text" placeholder="搜索">
<input type="button" value="Go">
<div id="word"></div>
</td>
</tr>
</table>
页面的底部,需引入jQuery库和jsonpajax插件,代码如下:
<script type="text/javascript" src="public/jquery.js"></script>
<script type="text/javascript" src="public/JsonpAjax.js"></script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791