今天用了下Jquery Autocomplete插件,用起来还是不错,但是有点小问题没有解决,第一次输入字符也不能显示,必须要按下其他键才能显示,而且 如果source中有中文也会出现同样的问题。
简单效果图(支持 英语、中文简体、中文繁体、拼音简写输入。比如输入 Z 或 C 或 中都可以提示中国):
调用页面代码:
<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>
JS
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];
}
};
- 大小: 10.6 KB
分享到:
相关推荐
Jquery AutoComplete
jquery autocomplete下载.rar
在输入页面利用JQuery获取用户输入,然后通过AJAX异步发送到处理页面,...若是jquery autoComplete组件则只要将从后台获取的数据放入autocomplete( url or data, [options] )第一个参数中就行,第二个参数可加可不加。
jquery autocomplete 动态补全例子支持中文 ajax传递json数据 文件里有json数据拼接
JQuery autocomplete ajax分页,对源码稍微修改了下
jQuery Autocomplete,百度搜索框提示效果。
jquery autocomplete.js 是一款优秀的开源JS,支持自动完成,不过如果是中文失效。原因是由于中文编码不一致引起的,修改源文件中AJAX请求中的编码,加上escape编码后,在后台用Server.URLDecode解码后,则中文也...
jquery-autocomplete搜索框自动完成的中文文档,上手快,轻便,功能强大
NULL 博文链接:https://zhaoaiqing.iteye.com/blog/333869
jQuery Autocomplete plugin是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入提示功能,而且示例本身...
Jquery autocomplete插件使用
jquery autocomplete官方版(源代码+示例) 自动补充功能非常实用
jquery autocomplete 所需js文件及样式。 实现仿百度输入查询下拉功能。
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
使用Jquery AutoComplete 插件来做自动填充功能,包含本地数组,后台数据等情况
jQuery autocomplete 自动加载
NULL 博文链接:https://bask.iteye.com/blog/766441
asp.net 仿google 只能搜索提示,提供源码,自带数据库。
jquery自动补全插件(jquery autocomplete) 内包含使用说明,前台+后台
PHP jquery autocomplete实现 解决中文乱码,上下键移动等功能