带有servlet的jQuery自动完成UI没有返回任何数据

我过去几个小时一直在摆弄这段代码片段，但我无法理解jQuery的自动完成UI是如何工作的。 我按照本教程http://viralpatel.net/blogs/tutorial-create-autocomplete-feature-with-java-jsp-jquery/我使用了相同的示例，但我没有向JSP发送请求，而是使用了servlet。 请求到达servlet“Fetcher”，它也会执行，但不会返回任何内容。 这是代码。

public class Fetcher extends HttpServlet { [...] List countryList = new ArrayList(); 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片段：

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

HTML表单：

  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 countryList = new ArrayList(); 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 result = new ArrayList(); 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自动完成的forms。 我选择了Google GSON将结果序列化为JSON。

有关：

• 使用AJAX源和appendTo理解和实现Jquery自动完成
• 如何从Java Servlet返回JSON对象

---

对于HTML文档 （在.jsp中实现），选择正确的库，样式表和样式：

         
 
 Country:   
 
   

相关： 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); } }); } }); }); }); 

自动完成function使用AJAX请求来调用servlet。 由于servlet的结果是合适的，因此可以按原样用于响应。

有关：

• jQuery UI Autocomplete的“源”回调中的“响应”和“请求”参数是什么？
• jQuery自动完成小部件
• jQuery ajax函数