Jquery UI 自动完成：自定义数据答案

【问题标题】：Jquery UI Autocomplete: Custom DataJquery UI 自动完成：自定义数据
【发布时间】：2013-07-30 21:40:17
【问题描述】：

我正在使用带有文本框的 jquery 自动完成功能。

html：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page session="true"%>
<html>
    <head>
    <title>Autocomplete Example</title>
    <link href='<c:url value='/views/css/style.css'/>' rel="stylesheet"
        type="text/css">
    <link href='<c:url value='/views/css/jquery-ui-1.10.3.custom.css'/>'
        rel="stylesheet" type="text/css">
    <script type="text/javascript"
    src="<c:url value='/views/js/jquery-1.9.1.min.js'/>"></script>
    <script type="text/javascript"
    src="<c:url value='/views/js/jquery-ui-1.10.3.custom.js'/>"></script>
<script>
    $(document).ready(
        function() {
                $("#txt-search").autocomplete({
                    minLength : 3,
                    source : "<c:out value="${queryResult}"/>",
                    select : function(evt, ui) {
                        alert(ui.item.firstName);
                        return false;
                    }
                }).data("txt-search")._renderItem = function(ul, item) {
                    return $("<li></li>").data("item.autocomplete",     item)
                            .append("<a>" + item.firstName + "    </a>").appendTo(
                                ul);
                };
            });
    </script>
    </head>
    <body>
    <div>
        <div style="width: 240px; height: 50px;">
            <input id="txt-search" type="text"
                style="width: 220px; height: 24px; margin-left: 10px;     margin-top: 10px; font-family: calibri; font-size: 12pt;" />
        </div>
        </div>
    </body>
</html>

控制器： 包 com.priyank.ac.controller;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

import com.priyank.ac.entity.User;
import com.priyank.ac.service.UserService;

@Controller
public class UserController {

    @Autowired
    private UserService userService;

@RequestMapping("/index")
public String getUser(HttpServletRequest request,
        HttpServletResponse response) {
    return "index";
}

@RequestMapping(value = "/queryUsers", method = RequestMethod.GET)
public void queryUsers(
        @RequestParam(value = "query", required = false, defaultValue = "") String query,
        Model model) {

    List<User> usersInCommunity = this.userService
            .queryUsersByUserId(query);
    List<User> users = new ArrayList<User>();
    users.addAll(usersInCommunity);
    model.addAttribute("usersInCommunity", users);
}
}

我总是收到以下错误：

TypeError: $(...).autocomplete(...).data(...) 未定义 [打破这个错误]

}).data("自动完成")._renderItem = function(ul, item) {

我指的是错误的图书馆吗？或者我在这里错过了一些点..

【问题讨论】：

标签： jquery autocomplete jquery-autocomplete

【解决方案1】：

我做了类似的事情，但我的 .data() 看起来像这样：

$("input#books").autocomplete({
                minLength : 3,
                source : someArray
}).data( "ui-autocomplete" )._renderItem = function(ul, item){
    //code to do cool stuff
};

【讨论】：

我在代码中看到的问题是，该库不支持数据功能。它说它是未定义的。 Js 文件已从 jquery-ui.com (jquery-ui-1.10.3.custom.js) 下载，我是否将它与其他库混合？
看来是对的。当您下载 jQuery UI 时，您是否允许该站点包含所有必需的组件？我也在使用 jQuery 1.10.2 但我认为 1.9.1 仍然很好。
是的，我允许包含所有必需的组件。我会尝试重新下载并使用它。
如果它适合你，请告诉我。我还注意到您从未提及是否尝试将“ui-autocomplete”放入 .data() 而不是“txt-search”