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 (サーブレット)) (DoPost と DoGet は上書きされます。Controller.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 ページが送信されます。リクエストは「用語」として表示されますが、オートコンプリート機能は何もしません。

誰かが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 に答える