Question

我使用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回复：（当我输入＆＃34; c＆＃34;在我的文本框中）

[{"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"}]

控制台输出对我来说也很合适：

提前致谢。

Answer 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"}]

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

1 个答案: