java中用jquery AutoComplete 实现自动补全(二)后台JSON实现自动补全
服务器端JSON实现自动补全
上两篇已经讲了用法和简单实例，这一篇讲到了重点，也是我们关心的与后台数据库交互，从后台获取JSON数据进行搜索，下面直接上代码：
页面代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery 实现自动补全功能</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>jqueryAutoComplete/jquery.autocomplete.css">
<script type="text/javascript" src="<%=basePath%>jqueryAutoComplete/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>jqueryAutoComplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
var names ; //定义数据
//开始函数
$(document).ready(function(){
$.ajax({
type:'POST',
contentType: "application/json",
url: "getAutoComplteList.action?1=1",
dataType: "json",
success:function(data){
names = data;
alert(data);
autocompleteFn(data);
}
});
});
//自动 补全方法
function autocompleteFn(names){
$("#autocomplete").autocomplete(names,{
minChars:1,
max: 10,
dataType:"json",
autoFill: true,
mustMatch: true,
matchContains: true,
scrollHeight: 220,
formatItem: function(data, i, total) {
return "<I>"+data.NICKNAME+"</I>";
},
formatMatch: function(data, i, total) {
return data.NICKNAME;
},
formatResult: function(data) {
return data.NICKNAME;
}
});
}
//搜索数据
function onSearch()
{
var nickName =$("#autocomplete").val();
alert(nickName);
$.ajax({
type:'POST',
contentType: "application/json",
url: "getAutoComplteListByName.action?nickName="+encodeURI(encodeURI(nickName)),
dataType: "json",
success:function(data){
names = data;
alert(data);
}
});
}
</script>
</head>
<body>
<input type="text" id="autocomplete" placeHolder="请输入搜索词" name="nickName"/>
<input type="button" name="btnSearch" onclick="onSearch();" value="搜索"/>
</body>
</html>
action 类代码：
package com.twkj.xmrcbgManage.action;
import com.twkj.common.BasicAction;
import com.twkj.xmrcbgManage.service.AutoCompleteService;
public class AutoCompletAction extends BasicAction{
private AutoCompleteService autoCompleteService;
public AutoCompleteService getAutoCompleteService() {
return autoCompleteService;
}
public void setAutoCompleteService(AutoCompleteService autoCompleteService) {
this.autoCompleteService = autoCompleteService;
}
/**
* 获取自动补全功能数据
*/
public String getAutoComplteList(){
try {
String jsonValue=autoCompleteService.findUserInfo();
System.out.println(jsonValue);
response.getWriter().write(jsonValue);
} catch (Exception e) {
System.err.println("自动补全出错！");
}
return null;
}
/**
* 根据条件查询
*/
public String getAutoComplteListByName(){
String nickName=request.getParameter("nickName");
try {
if (nickName!=null&&!"".equals(nickName)) {
nickName=java.net.URLDecoder.decode(nickName, "utf-8");
}
String jsonValue=autoCompleteService.findUserInfoByNickName(nickName);
System.out.println(jsonValue);
response.getWriter().write(jsonValue);
//具体业务代码自己根据需要写
} catch (Exception e) {
System.err.println("按条件查询出错！");
}
return null;
}
}
service 类代码：
package com.twkj.xmrcbgManage.serviceimpl;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import jofc2.org.json.JSONArray;
import com.twkj.dao.BaseDao;
import com.twkj.util.JsonTool;
import com.twkj.xmrcbgManage.service.AutoCompleteService;
public class AutoCompleteServiceImpl implements AutoCompleteService{
private JsonTool jsonTool;
private BaseDao baseDao;
public void setJsonTool(JsonTool jsonTool) {
this.jsonTool = jsonTool;
}
public void setBaseDao(BaseDao baseDao) {
this.baseDao = baseDao;
}
//查找所有用户昵称
public String findUserInfo()
{
JSONArray jsonArray=null;
String sql=" select t.sunickname as nickName from tbsecurity_users t where 1=1 ";
List<Object> objList=baseDao.querySqlObject(sql);
if (objList!=null&&objList.size()>0) {
jsonArray=new JSONArray();
for (int i = 0; i < objList.size(); i++) {
Map map=(HashMap) objList.get(i);
jsonArray.put(map);
}
}
return jsonArray.toString();
}
//查找所有用户昵称
public String findUserInfoByNickName(String nickName)
{
JSONArray jsonArray=null;
String sql=" select * from tbsecurity_users t where 1=1 ";
if(nickName!=null && !"".equals(nickName))
{
sql+=" and t.sunickname like '%"+nickName+"%' ";
}
System.out.println(sql);
List<Object> objList=baseDao.querySqlObject(sql);
if (objList!=null&&objList.size()>0) {
jsonArray=new JSONArray();
for (int i = 0; i < objList.size(); i++) {
Map map=(HashMap) objList.get(i);
jsonArray.put(map);
}
}
return jsonArray.toString();
}
}
以上是从后台获取JSON数据到前台展示，希望对大家有用！有什么问题可以随时指出！希望多多提意见！