0

我正在尝试在我的 Java Webb 应用程序中使用 jQuery UI 自动完成小部件。

现在我有以下代码：

查看 (buscarFoto.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 (Controller.java (servlet)) (DoPost 和 DoGet 被覆盖，Controller.java 在 WebApp 的任何其他部分都可以像 Servlet 一样工作)

    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 页面发送请求作为“术语”，但自动完成功能根本不做任何事情。

我在另一个问题中读到有人建议使用 JSON，但如果可以避免，我宁愿不使用它。谁能指出我正确的方向？

谢谢你。

4

1 回答 1

0

我将使用我使用的 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());

尝试这种简单的方法会奏效

于 2013-11-15T07:49:19.843 回答