JQuery-UI自动完成不显示下拉所需的结果答案

【问题标题】：JQuery-UI auto complete not showing required result with the drop downJQuery-UI自动完成不显示下拉所需的结果
【发布时间】：2015-12-10 02:14:44
【问题描述】：

我已经使用 jquery-ui 实现了一个自动完成文本框。但它只是出现小行而不是显示所需的结果。这是它的样子：

index.jsp：

<body>
    <h1>Hello Auto complete</h1>
    <br> <br> <br>

    <input id="search">
    <input type="hidden" id="search-id">
</body>

filter.js

$(document).ready(function () {
    $(function () {
        $("#search").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "SearchDB",
                    type: "GET",
                    data: {
                        term: request.term
                    },
                    dataType: "json",
                    success: function (data) {
                        response(data);
                       // console.log(data);
                    }

                });
            }
        });

    });
});

SearchDB servlet：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json");
        String term = request.getParameter("term");
        Session session = com.search.connection.HibernateUtil.getSessionFactory().openSession();
        Criteria criteria = session.createCriteria(Product.class);
        criteria.add(Restrictions.like("name", term + "%"));
        List<Product> proList = criteria.list();
        List<Product> myList = new ArrayList<>();
        for (Product product : proList) {
            myList.add(product);
        }
        Gson gson = new Gson();
        String result = gson.toJson(myList);
        response.getWriter().write(result);

    }

我的 json 响应：（当我在文本框中输入“c”时）

[{"id":5,"name":"COD 4","qnty":12,"dateAdded":"Dec 12, 2015"},{"id":6,"name":"COD 5","qnty":20,"dateAdded":"Oct 28, 2015"},{"id":7,"name":"Cars ","qnty":13,"dateAdded":"Dec 30, 2014"}]

控制台输出对我来说也不错：

提前致谢。

【问题讨论】：

标签： java jquery json jquery-ui jakarta-ee

【解决方案1】：

你需要在你的json中添加“value”，我将“name”替换为“value”：

[{"id":5,"value":"COD 4","qnty":12,"dateAdded":"Dec 12, 2015"},{"id":6,"value":"COD 5","qnty":20,"dateAdded":"Oct 28, 2015"},{"id":7,"value":"Cars ","qnty":13,"dateAdded":"Dec 30, 2014"}]

【讨论】：

谢谢。 :) 它给了我正确的下拉菜单。但我想知道name 而不是value 的问题？？
@MadushanPerera，这就是自动完成的工作原理：) 如果您没有自定义要显示的数据，自动完成将从您的 json 中选择“值”。由于我们还没有定义从 json 中选择哪一个，“value”是默认选择的。
如果您能告诉我如何自定义以选择用户定义值而不选择默认 value，我将不胜感激。我还需要将id 获取到我的隐藏输入。我该怎么做？
看看这里jqueryui.com/autocomplete/#custom-data。有一个事件“select”，你可以在这个事件上插入“id”。
好的。我将会。再次感谢。 :)