头像

JQuery+jsonp的自动补全插件

来源:http://www.sucaihuo.com/js/3115 richer 2017-09-29 23:36浏览(142) 收藏

一款JQuery+jsonp的自动补全插件,只要在输入框里输入任意内容,都会有相关的信息列表显示在输入框下面,点击可以选择列表信息的内容。
JQuery+jsonp的自动补全插件
分类:表单代码 > 输入框 难易:初级

程序员,你不是一个人;网站开发QQ群:35291327 在线充值,或联系QQ416148489直接充值

查看演示 下载资源: 8 下载资源 下载积分: 20 积分

页面的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>
评论13
头像

友情提示:垃圾评论一律封号,下载出错或者资源有问题请联系全栈客服QQ 416148489

  • 头像 12楼
    10-17 11:33
    574274593
    沙发
  • 头像 11楼
    10-16 10:32
    十九大
    就是你了
  • 头像 10楼
    10-08 12:19
    不一样的烟火
    实用,效果很棒
  • 头像 9楼
    10-08 12:01
    holy0573
    不错 很实用呢
  • 头像 8楼
    10-06 12:09
    sailtt
    很不错。这个正需要。。。学习了。
  • 头像 7楼
    10-05 20:54
    新来的,给我去买包辣条来
    很实用!下载下来!
  • 头像 6楼
    10-05 10:16
    nbspnbsp
    不错,收藏收藏,攒积分
  • 头像 5楼
    10-05 01:24
    bo5211ok
    这个 有用 留个脚印 以后用
  • 头像 4楼
    10-04 20:14
    张高峰123456
    好的很 我想下载试试
  • 头像 3楼
    10-02 09:08
    a51821064
    这个不错啊!
1 2