Jquery UI Autocomplete: Custom Data

Question

I am using jquery autocomplete functionality with textbox.

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>

Controller: package 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);
}
}

I alway get the following error:

TypeError: $(...).autocomplete(...).data(...) is undefined [Break On This Error]

}).data("autocomplete")._renderItem = function(ul, item) {

Am i referring the wrong library? or m missing some point here..

MonkeyZeus · Accepted Answer · 2013-07-30 13:40:17Z

1

I did something similar, but my .data() looks like this:

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

answered Jul 30, 2013 at 13:40

MonkeyZeus

20.8k4 gold badges41 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Priyank Thakkar Over a year ago

The problem I see with my code is, the library doesn't support the data function. It says it is undefined. Js file has been downloaded from jquery-ui.com (jquery-ui-1.10.3.custom.js) Have I mixed it up with some other library?

MonkeyZeus Over a year ago

It seems to be right. Did you allow the site to include all of the required components when you downloaded jQuery UI? Also I am using jQuery 1.10.2 but i think 1.9.1 is still fine.

Priyank Thakkar Over a year ago

Yes I allowed all the required components to be included. I will try to download it again and use it.

MonkeyZeus Over a year ago

Great let me know if it works for you. I also noticed you never mentioned if you tried putting "ui-autocomplete" into the .data() instead of "txt-search"

Collectives™ on Stack Overflow

Jquery UI Autocomplete: Custom Data

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related