实现输入框自动补全

最新推荐文章于 2023-02-24 16:53:48 发布

chenjiu3302

最新推荐文章于 2023-02-24 16:53:48 发布

阅读量791

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/519617/blog/895029

版权

实例代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>cityAuto</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.charhoo.com:8080/lib/jquery/autoComplete.js"></script>
<script src="http://webapi.amap.com/js/marker.js"></script>
<script>
	window.onload=function(){
		$("#getCenter").bind("click",function(){
			alert("center:"+$("#city").attr("center"));
		});
		var autoComplete = $("#city").autoFillSearch({
							max: 10,
							aid: "city",//自动完成框对应ID
							id: "city",
							idName: '',
							fieldName: 'text',
							msg: "地区",//输入框内显示的文字
							fontColor: "#999",//输入框内文字的颜色
							left:55,
							top: 10,
							keyupCb: function(e) {
								var keyword = $("#city").val();
								if(keyword) {
									var searchData = [];
									var searchResult = 0;
									for(var a=0;a<provinces.length;a++){
										if(provinces[a].name.toLowerCase().indexOf(keyword.toLowerCase()) >= 0){
											searchData[searchResult] = provinces[a];
											searchResult++;
										}
									}
									var list = [];
									for(var i= 0,j=searchData.length;i<j;i++) {
										list.push({
											text: searchData[i].name,
											value: searchData[i].center
										})
									}
									autoComplete.options.data = list;
								}
							},
							callback: function (data) {
								$("#city").val(data.text);
								$("#city").attr('center',data.value);
							}
						});
		
	};
</script>
<style>
.none {
    display: none;
}
.fillSearch_guess {
    position: absolute;
    background: #ffffff;
    z-index: 99999;
    border: 1px solid #c4d4dd;
}
</style>

</head>
<body >

city：
<input typt="text" id="city" value="123" style="width:300px"/>
<input typt="button" id="getCenter" value="getCenter" style="width:80px;text-align:center"/>
</body>
</html>

页面效果：

资源：

1，jquery.js

2，autoComplete.js

主要两个作用：

2.1，监听文本框，根据参数显示出匹配列表（data：直接传人数据，url：异步获取数据）。

2.2，监听匹配列表。

3，随便找了个数据，有省份和中心经纬度。

转载于:https://my.oschina.net/519617/blog/895029

chenjiu3302

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实现输入框自动补全

实例代码： <!doctype html><html><head><meta charset="utf-8"><title>cityAuto</title><script src="http://apps...
复制链接

扫一扫