autocompletesuggest.js

根据键盘触发的事件

	map.put("南京","NKG");
	map.put("南宁","NNG");
	map.put("南通","NTG");
	map.put("南阳","NNY");
	map.put("宁波","NGB");
	map.put("攀枝花","PZI");
	map.put("齐齐哈尔","NDG");
	map.put("且末","IQM");
	map.put("秦皇岛","SHF");
	map.put("秦皇岛","SHP");
	map.put("青岛","TAO");
	map.put("庆阳","IQN");
	map.put("衢州","JUZ");
	map.put("泉州","JJN");
	map.put("三亚","SYX");
	map.put("沙市","SHS");
	map.put("陕州","SZO");
	map.put("汕头","SWA");
	map.put("鄯善","SXJ");
	map.put("上海虹桥","SHA");
	map.put("上海浦东","PVG");
	map.put("韶关","HSC");
	map.put("深圳","SZX");
	map.put("沈阳","SHE");
	map.put("石家庄","SJW");
	map.put("思茅","SYM");
	map.put("泗水","SUB");
	map.put("苏州","SZV");
	map.put("塔城","TCG");
	map.put("台北","TSA");
	map.put("台东","TTG");
	map.put("台南","TNN");
	map.put("台中","TXG");
	map.put("太原","TYN");
	map.put("天津","TSN");
	map.put("通化","TNH");
	map.put("通辽","TGO");
	map.put("铜仁","TEN");
	map.put("万县","WXN");
	map.put("威海","WEH");
	map.put("潍坊","WEF");
	map.put("温州","WNZ");
	map.put("乌海","WUA");
	map.put("乌兰浩特","HLH");
	map.put("乌鲁木齐","URC");
	map.put("无锡","WUX");
	map.put("梧州","WUZ");
	map.put("武汉","WUH");
	map.put("武夷山","WUS");
	map.put("西安","XIY");
	map.put("西昌","XIC");
	map.put("西宁","XNN");
	map.put("锡林浩特","XIL");
	map.put("厦门","XMN");
	map.put("香港","HKG");
	map.put("襄樊","XFN");
	map.put("兴城","XEN");
	map.put("兴宁","XIN");
	map.put("徐州","XUZ");
	map.put("雅布赖","NNN");
	map.put("烟台","YNT");
	map.put("延安","ENY");
	map.put("延吉","YNJ");
	map.put("盐城","YNZ");
	map.put("伊宁","YIN");
	map.put("依兰","YLN");
	map.put("宜宾","YBP");
	map.put("宜昌","YIH");
	map.put("义乌","YIW");
	map.put("银川","INC");
	map.put("榆林","UYN");
	map.put("元谋","YUA");
	map.put("运城","YCU");
	map.put("湛江","ZHA");
	map.put("张家界(大庸)","DYG");
	map.put("昭通","ZAT");
	map.put("郑州","CGO");
	map.put("中甸","DIG");
	map.put("重庆","CKG");
	map.put("舟山","HSN");
	map.put("珠海","ZUH");
	map.put("遵义","ZYI");

	//中英文映射
	map.put("akesu","阿克苏");
	map.put("aleitai","阿勒泰");
	map.put("ankang","安康");
	map.put("anqing","安庆");
	map.put("anyang","安阳");
	map.put("anshan","鞍山");
	map.put("aomen","澳门");
	map.put("bangbu","蚌埠");
	map.put("baotou","包头");
	map.put("baoshan","保山");
	map.put("beihai","北海");
	map.put("beijing","北京");
	map.put("beijingnanyuan","北京南苑");
	map.put("changdou","昌都");
	map.put("zhangchun","长春");
	map.put("zhanghai","长海");
	map.put("zhangsha","长沙");
	map.put("zhangzhi","长治");
	map.put("changde","常德");
	map.put("changzhou","常州");
	map.put("chaoyang","朝阳");
	map.put("chengdou","成都");
	map.put("chifeng","赤峰");
	map.put("daxian","达县");
	map.put("dali","大理");
	map.put("dalian","大连");
	map.put("datong","大同");
	map.put("dazu","大足");
	map.put("dandong","丹东");
	map.put("dongsheng","东胜");
	map.put("dunhuang","敦煌");
	map.put("enshi","恩施");
	map.put("fuzhou","福州");
	map.put("fuyang","阜阳");
	map.put("fuyun","富蕴");
	map.put("ganzhou","赣州");
	map.put("gaoxiong","高雄");
	map.put("geermu","格尔木");
	map.put("guanghan","广汉");
	map.put("guangzhou","广州");
	map.put("guiyang","贵阳");
	map.put("guilin","桂林");
	map.put("haerbin","哈尔滨");
	map.put("hami","哈密");
	map.put("haikou","海口");
	map.put("hailaer","海拉尔");
	map.put("hanzhong","汉中");
	map.put("hangzhou","杭州");
	map.put("hefei","合肥");
	map.put("hetian","和田");
	map.put("heihe","黑河");
	map.put("hengyang","衡阳");
	map.put("huhehaote","呼和浩特");
	map.put("hualian","花莲");
	map.put("huanghua","黄花");
	map.put("huangshan","黄山");
	map.put("huangyan","黄岩");
	map.put("jian","吉安");
	map.put("jilin","吉林");
	map.put("jinan","济南");
	map.put("jining","济宁");
	map.put("jiamusi","佳木斯");
	map.put("jiayi","嘉义");
	map.put("jiayuguan","嘉峪关");
	map.put("jinzhou","锦州");
	map.put("jinggangshan","井冈山");
	map.put("jingdezhen","景德镇");
	map.put("jinghongxishuangbanna","景洪西双版纳");
	map.put("jiujiang","九江");
	map.put("jiuzhaigou","九寨沟");
	map.put("jiuquan","酒泉");
	map.put("kashen","喀什");
	map.put("kelamayi","克拉玛依");
	map.put("kuche","库车");
	map.put("kuerlei","库尔勒");
	map.put("kunming","昆明");
	map.put("lasa","拉萨");
	map.put("lanzhou","兰州");
	map.put("lanzhou","兰州");
	map.put("lanzhou","兰州");
	map.put("laohekou","老河口");
	map.put("lijiang","丽江");
	map.put("lianyungang","连云港");
	map.put("liangping","梁平");
	map.put("lincang","临沧");
	map.put("linyi","临沂");
	map.put("liuzhou","柳州");
	map.put("luzhou","泸州");
	map.put("luzhou","泸州");
	map.put("luoyang","洛阳");
	map.put("manzhouli","满洲里");
	map.put("mangshi","芒市");
	map.put("mangshi","芒市");
	map.put("meixian","梅县");
	map.put("mianyang","绵阳");
	map.put("mudanjiang","牡丹江");
	map.put("nanchang","南昌");
	map.put("nanchong","南充");
	map.put("nanjing","南京");
	map.put("nanning","南宁");
	map.put("nantong","南通");
	map.put("nanyang","南阳");
	map.put("ningbo","宁波");
	map.put("panzhihua","攀枝花");
	map.put("qiqihaer","齐齐哈尔");
	map.put("qiemo","且末");
	map.put("qinhuangdao","秦皇岛");
	map.put("qinhuangdao","秦皇岛");
	map.put("qingdao","青岛");
	map.put("qingyang","庆阳");
	map.put("quzhou","衢州");
	map.put("quanzhou","泉州");
	map.put("sanya","三亚");
	map.put("shashi","沙市");
	map.put("shanzhou","陕州");
	map.put("shantou","汕头");
	map.put("shanshan","鄯善");
	map.put("shanghaihongqiao","上海虹桥");
	map.put("shanghaipudong","上海浦东");
	map.put("shaoguan","韶关");
	map.put("shenzhen","深圳");
	map.put("shenyang","沈阳");
	map.put("shijiazhuang","石家庄");
	map.put("simao","思茅");
	map.put("sishui","泗水");
	map.put("suzhou","苏州");
	map.put("tacheng","塔城");
	map.put("taibei","台北");
	map.put("taibei","台北");
	map.put("taibei","台北");
	map.put("taidong","台东");
	map.put("tainan","台南");
	map.put("taizhong","台中");
	map.put("taiyuan","太原");
	map.put("tianjin","天津");
	map.put("tonghua","通化");
	map.put("tongliao","通辽");
	map.put("tongren","铜仁");
	map.put("wanxian","万县");
	map.put("weihai","威海");
	map.put("weifang","潍坊");
	map.put("wenzhou","温州");
	map.put("wuhai","乌海");
	map.put("wulanhaote","乌兰浩特");
	map.put("wulumuqi","乌鲁木齐");
	map.put("wuxi","无锡");
	map.put("wuzhou","梧州");
	map.put("wuhan","武汉");
	map.put("wuhan","武汉");
	map.put("wuyishan","武夷山");
	map.put("xian","西安");
	map.put("xian","西安");
	map.put("xichang","西昌");
	map.put("xining","西宁");
	map.put("xilinhaote","锡林浩特");
	map.put("shamen","厦门");
	map.put("xianggang","香港");
	map.put("xiangfan","襄樊");
	map.put("xingcheng","兴城");
	map.put("xingning","兴宁");
	map.put("xuzhou","徐州");
	map.put("yabulai","雅布赖");
	map.put("yantai","烟台");
	map.put("yanan","延安");
	map.put("yanji","延吉");
	map.put("yancheng","盐城");
	map.put("yining","伊宁");
	map.put("yilan","依兰");
	map.put("yibin","宜宾");
	map.put("yichang","宜昌");
	map.put("yiwu","义乌");
	map.put("yinchuan","银川");
	map.put("yulin","榆林");
	map.put("yuanmou","元谋");
	map.put("yuncheng","运城");
	map.put("zhanjiang","湛江");
	map.put("zhangjiajiedayong","张家界大庸");
	map.put("zhaotong","昭通");
	map.put("zhengzhou","郑州");
	map.put("zhongdian","中甸");
	map.put("chongqing","重庆");
	map.put("zhoushan","舟山");
	map.put("zhuhai","珠海");
	map.put("zunyi","遵义");
		
	//获得匹配
	function getAutoSuggestMatches(value,citiesValue){
		var matchResults = new Array;
		if(value != ""){
			for(var i=0;i<citiesValue.length;i++){
				if(citiesValue[i].indexOf(value) == 0){
					matchResults.push(citiesValue[i]);
				}
			}
		}
		else{
		
		}
		
		return matchResults;
	}
	
	//获得对象
	function getObject(obj){
		return typeof(obj)=="string"?document.getElementById(obj):obj
	}
	
	//展开下拉菜单
	function displayDropDownMenu(id){
		e=getObject(id)
		var et=e.offsetTop;
		var el=e.offsetLeft;
		
		while(e=e.offsetParent){
			et+=e.offsetTop;
			el+=e.offsetLeft;
		}
	
		getObject("reg_div").style.left=(el) + "px";
		getObject("reg_div").style.top=(et+20) + "px";
		getObject("reg_div").style.display='';

		for(var i=0;i<10;i++)
			document.getElementById("city_0"+i).style.backgroundColor = '';
			
		document.getElementById("city_00").style.backgroundColor = '#BBAACC';
		
		if(document.getElementById("input_01").value != ""){
			
			var cityValue = document.getElementById("input_01").value;
			var arrCities = getAutoSuggestMatches(cityValue,cities);
			//var arrCH;
			if(cityValue.charCodeAt(0) < 255){
				for(var i=0;i<arrCities.length;i++){
					arrCities[i] = map.get(arrCities[i]);
				}
			}
			for(var i=0;i<arrCities.length && i<10;i++){
				document.getElementById("city_0"+i).innerHTML = arrCities[i];
			}
			for(var i=arrCities.length;i<10;i++){
				document.getElementById("city_0"+i).innerHTML = "";
			}

		}
		else if(document.getElementById("input_01").value == ""){
			suggestCities();
		}
	}
	
	//选定制定的飞机场
	function hideDropDownMenu(id){
		//控件的innerHTML的值为空的时候，以文本框input_01的值输入，否则以div控件的值输入
		getObject("input_01").value=getObject(id).innerHTML==""?getObject("input_01").value:getObject(id).innerHTML;
		getObject("reg_div").style.display='none';
	}
	
	function overed(id){
		//内容为空的时候，不让该控件的背景颜色改变
		if(id.innerHTML == "")
			return ;
		id.style.backgroundColor='#BBAACC';
	}
	
	function outed(id){
		id.style.backgroundColor='';
	}
	
	function suggestCities(){
		if(document.getElementById("input_01").value == ""){
			document.getElementById("city_00").innerHTML = "北京";
			document.getElementById("city_01").innerHTML = "上海";
			document.getElementById("city_02").innerHTML = "广州";
			document.getElementById("city_03").innerHTML = "深圳";
			document.getElementById("city_04").innerHTML = "三亚";
			document.getElementById("city_05").innerHTML = "青岛";
			document.getElementById("city_06").innerHTML = "杭州";
			document.getElementById("city_07").innerHTML = "南京";
			document.getElementById("city_08").innerHTML = "厦门";
			document.getElementById("city_09").innerHTML = "大连";
		}
	}
	
	//控制方向键与回车键的选择
	function navigation(evt){
		//if(document.activeElement.name != "input_01")
		//	return;
			
		var code;
		evt = evt || window.event;
		code = evt.keyCode;
		var availableCity = 0;
		for(var i=0;i<10;i++){
			if(document.getElementById("city_0"+i).innerHTML != "")
				availableCity++;
			else
				break;
		}
		//alert(availableCity);
		if(availableCity != 0){
			if(code == 38){	
				for(var i=0;i<availableCity;i++){
					if(document.getElementById("city_0"+i).style.backgroundColor != ''){
						document.getElementById("city_0"+i).style.backgroundColor = '';
						document.getElementById("city_0"+((i-1)<0?9:(i-1))).style.backgroundColor = '#BBAACC';
						break;
					}
				}
			}
			else if(code == 40){
				for(var i=0;i<availableCity;i++){
					if(document.getElementById("city_0"+i).style.backgroundColor != ''){
						document.getElementById("city_0"+i).style.backgroundColor = '';
						document.getElementById("city_0"+((i+1)>=availableCity?0:i+1)).style.backgroundColor = '#BBAACC';
						break;
					}
				}
			}
		}
		
		if(code == 13){	
			for(var i=0;i<availableCity;i++){
				if(document.getElementById("city_0"+i).style.backgroundColor != ''){
					document.getElementById("input_01").value = document.getElementById("city_0"+i).innerHTML;
					document.getElementById("city_0"+i).style.backgroundColor == '';//clear color
					document.getElementById("reg_div").style.display = 'none';
					break;
				}
			}
		}
	}

	function CompleteEvent(evt){
		var cityValue = document.getElementById("input_01").value;
		var arrCities = getAutoSuggestMatches(cityValue.toLowerCase(),cities);
		//var arrCH;
		evt = evt || window.event;
		var code = evt.keyCode;
		//过滤方向键的干扰
		if(code > 40 || code < 37){
			if(cityValue.charCodeAt(0) < 255){
				//拼音转换为汉字
				for(var i=0;i<arrCities.length;i++){
					arrCities[i] = map.get(arrCities[i]);
				}
			}
			for(var i=0;i<arrCities.length && i<10;i++){
				document.getElementById("city_0"+i).innerHTML = arrCities[i];
			}
			for(var i=arrCities.length;i<10;i++){
				document.getElementById("city_0"+i).innerHTML = "";
			}
		}
		//文本框为空时，显示推荐的城市
		if(cityValue == ""){
			suggestCities();
		}
	}

	function closeAutoSuggest(){
		getObject("reg_div").style.display='none';
		//getObject("input_01").value = getObject("city_00").innerHTML;
	}
	
	function autoSuggestFunc(evt){
		CompleteEvent(evt);
		navigation(evt);
	}
	
	//该文本框对象
	function TextBoxObject(){
		//设置文本框的宽度
		this.setWidth = function (value){
			document.getElementById("input_01").style.width = value;
		}
		
		
	}
	
	//测试函数
	function test(){
		var object = new TextBoxObject();
		object.setWidth(400);
	}