Question

我在文本框中使用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（“autocomplete”）._ renderItem = function（ul，item）{

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

Answer 1

我做了类似的事，但我的.data（）看起来像这样：

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

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

1 个答案: