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

Posted 2023-02-26

技术标签:

【中文标题】带有 servlet 的 jQuery 自动完成 UI 不返回任何数据【英文标题】：jQuery autocomplete UI with servlet is not returning any data 【发布时间】：2013-09-07 21:11:20 【问题描述】：

过去几个小时以来，我一直在摆弄这段代码片段，但我无法理解 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。拜托，有人能告诉我它是如何工作的，以便我可以在其他地方使用它。

【问题讨论】：

您找到的教程显示使用$("#tags").autocomplete("url")，但您将其用作$("#tags").autocomplete(source:"url")。如果由于某种原因您的操作与教程不同，您为什么抱怨它不起作用？你应该使用$("#tags").autocomplete("Fetcher") 【参考方案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。