自动完成 jQuery UI 插件,JSP 和 Servlet 不起作用



我正在尝试在我的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()); 

尝试这种简单的方法将起作用

最新更新