Jquery Autocomplete-CSDN博客

本文链接：https://blog.csdn.net/iteye_8781/article/details/81954367

今天用了下Jquery Autocomplete插件，用起来还是不错，但是有点小问题没有解决，第一次输入字符也不能显示，必须要按下其他键才能显示，而且如果source中有中文也会出现同样的问题。
简单效果图(支持英语、中文简体、中文繁体、拼音简写输入。比如输入 Z 或 C 或中都可以提示中国):
[img]http://dl.iteye.com/upload/attachment/334511/cbb8657d-23de-3d60-860a-c6de87e228a3.jpg[/img]
调用页面代码:


<html>
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui-1.8.custom.css"/>

<script type="text/javascript" src="query.js"></script>
<title>Index Page</title>
</head>

<body >
	<table>
		<tr>
			<td >原产国</td>
			<td><input type="text" onkeyup="queryLocality(this);"/></td>
		</tr>
	</table>
</body>

</html>

<script>

</script>


function queryLocality(elem){
		var names = [
		     		 "中　国 | 中 國 | China | ZG","韩　国 | 韓 國 | South Korea | HG","日　本 | 日 本 | Japan | RB","阿富汗 | 阿富汗 | Afghanistan | AFH",
		     		 "东帝汶 | 東帝汶 | East Timor | DDW","阿联酋 | 阿聯酋 | Emirates | ALQ","巴基斯坦 | 巴基斯坦 | Pakistan | BJST","塔吉克斯坦 | 塔吉克斯坦 | Tajikistan | TJKST",
		     		 "沙特阿拉伯 | 沙特阿拉伯 | Saudi Arabia | STALB","巴　林 | 巴　林 | Bahrain | BL","印　尼 | 印　尼 | Indonesia | YN","泰　国 | 泰　國 | Thailand | TG",
		             "尼泊尔 | 尼泊爾 | Nepal | NBE","卡塔尔 | 卡塔爾 | Qatar | KTE","土耳其 | 土耳其 | Turkey | TEQ","孟加拉国 | 孟加拉國 | Bangladesh | MJL","不　丹 | 不　丹 | Bhutan | BD",
		             "哈萨克斯坦 | 哈薩克斯坦 | Kazakhstan | ASKST","缅　甸 | 緬　甸 | Myanmar MD","越　南 | 越　南 | Viet Nam | YN","阿　曼 | 阿　曼 | Oman | AM",
		             "菲律宾 | 菲律賓 | Philippines | FLB","黎巴嫩 | 黎巴嫩 | Lebanon | LBN","巴勒斯坦 | 巴勒斯坦 | Palestine | BLST","约　旦 | 約　旦 | Jordan | YD",
		             "亚美尼亚 | 亞美尼亞 | Armenia | YMNY","土库曼斯坦 | 土庫曼斯坦 | Turkmenistan | TKMST","蒙　古 | 蒙　古 | Mongolia | MG","老　挝 | 老　撾 | Lao | LW",
		             "柬埔寨 | 柬埔寨 | Cambodia | JPZ","科威特 | 科威特 | Kuwait | KWT","塞浦路斯 | 塞浦路斯 | Cyprus | SPLS","阿塞拜疆 | 阿塞拜疆 | Azerbaijan | ASBJ",
		             "朝　鲜 | 朝　鮮 | North Korea | CX","文　莱 | 文　萊 | Brunei | WL","伊　朗 | 伊　朗 | Iran YL","新加坡 | 新加坡 | Singapore | XJP","伊拉克 | 伊拉克 | Iraq | YLK",
		             "斯里兰卡 | 斯里蘭卡 | Lanka | SLLK","格鲁吉亚 | 格魯吉亞 | Georgia | GNJY","吉尔吉斯斯坦 | 吉爾吉斯斯坦 | Kyrgyzstan | JEJSST","印　度 | 印　度 | India | YD",
		             "也　门 | 也　門 | Yemen | YM","以色列 | 以色列 | Israel | YSL","叙利亚 | 敘利亞 | Syrian | XLY","马尔代夫 | 馬爾代夫 | Maldives | MEDF",
		             "马来西亚 | 馬來西亞 | Malaysia | MLXY","乌兹别克斯坦 | 烏茲別克斯坦 | Uzbekistan | WZBKST" ];

		$( elem ).autocomplete({
			autoFill: false,
			source: function( request, response ) {
				var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
				response( $.grep( names, function( value ) {
					value = value.label || value.value || value;
					return matcher.test( value ) ;
				}) );
			},
			focus: function(event, ui) {
				ui.item.value = getName(ui.item).trim();
			}


		});
		//显示内容
		$(elem).data("autocomplete")._renderItem = function( ul, item ) {
			return $( "<li style='width:300px' ></li>" )
				.data( "item.autocomplete", item )
				.append( "<a>"+getName(item) + "</a>" )
				.appendTo( ul );
		};

		function getName(item){
			var i18nUtils={};

			i18nUtils.lang='zh-cn';//记住选择的语言,默认值

			if(!item){return;}
			var value = item.value.split("|");
			 var index = 0;
			 if(i18nUtils.lang === 'zh-hk'){
				index = 1;
			 }else if(i18nUtils.lang === 'en'){
				 index = 2;
			 }
			 return value[index];
		}

	};