我正在尝试在我的Java Webb App中使用jQuery UI自动完成小部件。
就像现在一样,我有以下代码:
景观(巴士车.jsp)
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type ="text/css" href="css/jquery-ui-1.10.3.custom.css"/>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h3>Escull usuari</h3>
<input type="text" id="usuari" name="usuari"/>
<script>
$("#usuari").autocomplete({
source: "Controller?action=llistaUsuaris"
});
</script>
</body>
控制器(Controller.java (servlet))(DoPost和DoGet被覆盖,控制器.java在WebApp的任何其他部分中都可以正常工作)
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
GestioDB_Postgres db = new GestioDB_Postgres();
HttpSession session = request.getSession();
String op = request.getParameter("action");
if (op.equals("llistaUsuaris")) {
String query = request.getParameter("term");
List<String> usuaris = db.llistaUsuaris(query);
Iterator<String> iterator = usuaris.iterator();
while (iterator.hasNext()) {
String usuari = (String) iterator.next();
out.println(usuari);
}
}
控制器第 3 行中对数据库的调用工作正常(我已经测试过它),控制器本身也工作正常(当我在 NetBeans 中运行它时,它会打印相应的"usuaris"),.jsp页面将请求作为"term"发送,但自动完成函数根本不执行任何操作。
我在另一个问题中读到有人建议使用 JSON,但如果可以避免,我宁愿不使用它。谁能指出我正确的方向?
谢谢。
我将使用我使用的jQuery UI插件显示我的自动完成代码。
请按照以下代码操作,
$("#fileNameInput").autocomplete({
source : function(request,response){
var url = "autocomplete?type=FileSearch&time="+new Date(); // some URL mapped to servlet
$.post(url,
{
/*
'srcIdX' is the extra data i pass, this is send along with 'term',
so at servlet i do request.getParamter('term')
and request.getParamter('sourceid')
*/
sourceid : $("#srcIdX").val()
},
function(data){
/*
here my data which i get from server (i.e. from servlet in response) is as follows
{
"data" : [
{
"fileName" : "something",
"fileId" : "something",
},
{
"fileName" : "something",
"fileId" : "something",
},......
]
}
*/
var jsonObj = $.parseJSON(data);
if(jsonObj.data != "null"){
response($.map(jsonObj.data,function(obj,i){
return {
label : obj.fileName,
value : obj.fileName
}
}))
}
}
);
},
minLength : 1,
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
select: function(event, ui){
$("#fileIdX").val(ui.item.value); // THIS IS SOME INPUT HIDDEN WHICH I USE TO STORE THE 'VALUE' OF SELECTED 'LABEL'
}
});
在服务器端,我可以使用 GSON 库传递 jSon,或者简单地使用字符串缓冲区,
PrintWriter out = response.getWriter();
StringBuffer strb = new StringBuffer();
strb.append("{ "data" : [ { "fileId" : "12", "fileName" : "Rahul_source" },");
strb.append(" { "fileId" : "13", "fileName" : "doug_source" }, ");
strb.append(" { "fileId" : "14", "fileName" : "sridhar_source" }, ");
strb.append(" { "fileId" : "15", "fileName" : "FRT" }, ");
strb.append(" { "fileId" : "16", "fileName" : "ASWQ_source" } ");
strb.append("] } ");
out.write(strb.toString());
尝试这种简单的方法将起作用