插件的地方:
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
1.
在页面导入
<script type="text/javascript" src="${ctx }/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="${ctx }/js/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/css/jquery.autocomplete.css">
<script type="text/javascript">
var options = {
minChars: 1, //最少输入多少字符开始查询
max: 500, //最多显示多少
width: 150, //宽度
matchContains: true,
matchSubset:false,
extraParams:{q:function(){return $("#this").val();}}, //传递参数
dataType: 'json', //返回JSON格式
parse: function(data) {
var rows = [];
for(var i=0; i<data.length; i++){
rows[rows.length] = {
data:data[i],
value:data[i].id,
result:data[i].name
};
}
return rows;
},
formatItem: function(row, i, max) {//显示出来的项格式
return row.name;
},
formatMatch: function(row){return row.name;},
formatResult: function(row){return row.name; }
};
$(function() {
$("#inputName").autocomplete("${ctx}/pages/getSuggestion.action", options);
$("#inputName").result(function(event, data, formatted) {//data 选中的行json对象. formatted是formatMatch返回的值.
$("#inputId").val(data.id);
});
});
</script>
<body>
<strong>Who:</strong>
<input type="text" id="inputName" size="30" value="" style="width: 150px;"/>
<input type="text" id="inputId" size="30" value="" />
<input type="hidden" id="hinpfromCity">
</body>
3.public void getSuggestion() throws IOException
{
HttpServletResponse response=getResponse();
HttpServletRequest request=getRequest();
String str=request.getParameter("q");//得到输入的值
Map<String, Object> paraMap = new HashMap<String, Object>();
paraMap.put("proname", "%"+str+"%");//模糊查询包含你输入的字符
List list=loginService.getsql("getSuggest", paraMap);
JSONArray jarray=new JSONArray();//下面是组装成json格式
for(int i=0;i<list.size();i++)
{
JSONObject jo=new JSONObject();
Object[] obj=(Object[])list.get(i);
jo.put("id", obj[0]);
jo.put("name", obj[1]);
jarray.add(jo);
}
response.getWriter().print(jarray);//送回客户端
}
----------------------------------------------------------------------------------------------------------------------------
两种方法
<script type="text/javascript" language="javascript">
<!-- $(document).ready(function(){
// 方法一( 初始化时添加数据 )
/*
var list = "${serverNmList}".split(',');
$("#serverNm").autocompleteArray(list);
*/
// 方法二(实时响应)
$("#serverNm").autocomplete(
"serverAuthMng.nhn?m=getServerNmListForAjax",
{
delay:0,
matchContains: true,
max: 250,
extraParams: {q:function(){return $('#serverNm').val();}},
dataType: 'json',
parse: function(data) {
var rows = [];
for(var i=0; i<data.length; i++){
rows[rows.length] = {
data: data[i],
value: data[i],
result: data[i]
};
}
return rows;
},
formatItem: function(row,i,n){
return row;
},
formatResult: function(data) {
$("#serverNm").innerText = data;
}
}
);
});
//-->
</script>