JQuery AutoComplate 插件下载地址:
http://docs.jquery.com/UI/Autocomplete 在这个下载地址中提供了Demo,使用的朋友可以查看Demo
Demo效果图主要是一个中文和数字编号
需要的CSS文件和JavaScript文件
<script type='text/javascript'src='<=path>/js/jquery1.4.2min.js'> </script>
<script type='text/javascript'src='<=path>/js/jquery.autocomplete.js'>
</script>
<link rel="stylesheet" type="text/css"
href="<%=path%>/css/jquery.autocomplete.css" />
编写编号提示JavaScript代码和中文提示代码
<script type="text/javascript">
$(document).ready(function(){
$("#username").autocomplete("queryAuto.action",{
max: 10, //列表包含最大记录数
minChars:1,//输入最小字符
scroll: true,
matchContains: true,
matchCase:false,
width:150,
scrollHeight: 100,
dataType:"json",
parse: function(data) { //加入对返回的json对象进行解析函数,函数返回一个数组
return $.map(data, function(row) {
return {
data: row, //通过此参数设置formatItem函数的return值
value: row.id, //等同于formatMatch函数中return的内容
result: row.id //等同于formatResult函数中return的内容
}
});
},
/*
parse:function(data){
var rows = [];
//var resultData = data.content;
var d = data;
alert(d[0].name);
for(var i = 0; i < d.length;i++){
rows[rows.length] = {
data:d[i].id,
value:d[i],
result:d[i].id
};
}
return rows;
},
*/
//每次调用该函数,将返回值以列表的形式包含在下拉列表
formatItem: function(row, i, n) {
return row.id+" "+row.name;
},
formatResult:function(row,i,max){
return row.id;
}
});
$("#chname").autocomplete("queryNameChinese.action",{
max: 10, //列表包含最大记录数
minChars:1,//输入最小字符
scroll: false,
matchContains: true,
matchCase:false,
width:150,
scrollHeight: 100,
dataType:"json",
parse: function(data) { //加入对返回的json对象进行解析函数,函数返回一个数组
return $.map(data, function(row) {
return {
data: row, //通过此参数设置formatItem函数的return值
value: row.name, //等同于formatMatch函数中return的内容
result: row.name //等同于formatResult函数中return的内容
}
});
},
//每次调用该函数,将返回值以列表的形式包含在下拉列表
formatItem: function(row, i, n) {
return row.name;
},
formatResult:function(row,i,max){
return row.name;
}
});
});
</script>
Json 数据格式及内容,其中的row.id的id在代码中代表编号,row.name代表姓名
[{"id":"2001","name":"王海"},{"id":"2002","name":"王成凯"},{"id":"2003","name":"王雨"},{"id":"2004","name":"王蒙"},{"id":"2005","name":"王依"},{"id":"2006","name":"王静"},{"id":"2007","name":"王酷"},{"id":"2008","name":"王过洋"},{"id":"2009","name":"王金龙"},{"id":"2010","name":"王浩"},{"id":"2011","name":"王海"}]
html 代码
<h3>ID编号匹配</h3>
<input type="text" style="width:150px;"id="username">
<h4>中文姓名匹配</h4>
<input type="text" id="chname">
Demo中所遇到的问题:
1 就是在IE8下面当超过指定的显示的内容的时候不能出现滚动条,需要修改源码源码的736行
if($.browser.msie && ((typeof document.body.style.maxHeight === "undefined") || (document.body.style.maxHeight == '')))
2 在火狐浏览器中,当开始输入法的时候输入中文时不会触发事件,需要修改源码调用其内部函数,在源码199行加入以下代码:
.bind("input", function() {
// firefox input输入栏发生字符变化时,重新进行查询 (调用其内部的onChange函数),这里主要针对firefox而言
onChange(0, true);
});