帶有servlet的jQuery自動完成UI不返回任何數據

Question

我過去幾個小時一直在擺弄這段代碼片段，但我無法理解jQuery的自動完成UI是如何工作的。 我按照本教程http://viralpatel.net/blogs/tutorial-create-autocomplete-feature-with-java-jsp-jquery/我使用了相同的示例，但我沒有向JSP發送請求，而是使用了servlet。 請求到達servlet“Fetcher”，它也會執行，但沒有任何內容返回到頁面。 這是代碼。

public class Fetcher extends HttpServlet {
    [...]

    List<String> countryList = new ArrayList<String>();
    String param = request.getParameter("term");

    countryList.add("USA");
    countryList.add("Pakistan");
    countryList.add("Britain");
    countryList.add("India");
    countryList.add("Italy");
    countryList.add("Ireland");
    countryList.add("Bangladesh");
    countryList.add("Brazil");
    countryList.add("United Arab Emirates");
    PrintWriter out = response.getWriter();
    response.setContentType("text/plain");
    response.setHeader("Cache-Control", "no-cache");
     for(String country : countryList){
        out.println(country);
    }

    [...]
}

HTML中的Javascript片段：

 <script>
       $(function() {

         $( "#tags" ).autocomplete({
          source: "Fetcher"

      });
 });
 </script>

HTML表單：

 <label for="tags">Tags: </label>
 <input id="tags" />

頁面上的示例似乎是在jquery中為專業人士編寫的， http：//jqueryui.com/autocomplete/#default 。 請，有人可以告訴它究竟是如何工作的，以便我可以在其他地方使用它。

Answer 1

servlet應該將自動完成數據作為JSON返回。 有幾個選項，我選擇了一個包含帶標簽/值屬性的對象的數組：

@WebServlet("/autocomplete/*")
public class AutoCompleteServlet extends HttpServlet {
    @Override
    protected void doPost(final HttpServletRequest request,
            final HttpServletResponse response) throws ServletException,
            IOException {

        final List<String> countryList = new ArrayList<String>();
        countryList.add("USA");
        countryList.add("Pakistan");
        countryList.add("Britain");
        countryList.add("India");
        countryList.add("Italy");
        countryList.add("Ireland");
        countryList.add("Bangladesh");
        countryList.add("Brazil");
        countryList.add("United Arab Emirates");
        Collections.sort(countryList);

        // Map real data into JSON

        response.setContentType("application/json");

        final String param = request.getParameter("term");
        final List<AutoCompleteData> result = new ArrayList<AutoCompleteData>();
        for (final String country : countryList) {
            if (country.toLowerCase().startsWith(param.toLowerCase())) {
                result.add(new AutoCompleteData(country, country));
            }
        }
        response.getWriter().write(new Gson().toJson(result));
    }
}

要返回自動完成數據，您可以使用此幫助程序類：

class AutoCompleteData {
    private final String label;
    private final String value;

    public AutoCompleteData(String _label, String _value) {
        super();
        this.label = _label;
        this.value = _value;
    }

    public final String getLabel() {
        return this.label;
    }

    public final String getValue() {
        return this.value;
    }
}

所以在servlet中，真實數據被映射成適合jQuery自動完成的形式。 我選擇了Google GSON將結果序列化為JSON。

有關：

對於HTML文檔 （在.jsp中實現），選擇正確的庫，樣式表和樣式：

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"> </script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

        <script type="text/javascript" src="autoComplete.js"> </script>
    </head>

    <body>
        <form>
            <div class="ui-widget">
                <label for="country">Country: </label>
                <input id="country" />
            </div>
        </form>
    </body>
</html>

相關： jQuery自動完成演示

我已將Javascript函數放在單獨的文件autoComplete.js ：

$(document).ready(function() {
    $(function() {
        $("#country").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "/your_webapp_context_here/autocomplete/",
                    type: "POST",
                    data: { term: request.term },

                    dataType: "json",

                    success: function(data) {
                        response(data);
                    }
               });              
            }   
        });
    });
});

自動完成功能使用AJAX請求來調用servlet。 由於servlet的結果是合適的，因此可以按原樣用於響應。

有關：

帶有servlet的jQuery自動完成UI不返回任何數據

問題描述

1 個解決方案

解決方案1
11 已采納 2013-09-05 14:57:19

帶有servlet的jQuery自動完成UI不返回任何數據

問題描述

1 個解決方案

解決方案1 11 已采納 2013-09-05 14:57:19

解決方案1
11 已采納 2013-09-05 14:57:19