Jquery-ui Autocomplete select Call back function is not working properly

Question

I am using jquery-ui autocomplete and making a ajax call inside the autocomplete function i am calling my controller action which returns Json , every thing is working fine but when i select some thing from suggestion dropdown then select call back function called and in select callback function ui is undefined .

Javascript

 function log(message) {
            $("<div>").text(message).prependTo("#log");
            $("#log").scrollTop(0);
        }

        $("#search").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Home/GetCompanyNames",
                    dataType: "jsonp",
                    data: "searchterm=" + request.term,
                    success: function (data) {
                        response($.map(data, function (item) {
                            alert(item.Value);
                            return {
                                label: item.Name,
                                value: item.Name
                            };
                        }));
                    }
                });
            },
            minLength: 2,
            select: function (event, ui) {
                alert(ui.item.Name);
            alert(ui.item.Value);
            alert(ui.item.LogoUrl);
            },
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });

    });

Action in Controller :

    public JsonResult GetCompanyNames (string searchterm)
    {
        var companies = context.companyService.Query().Where(x => x.Name.Contains(searchterm)).ToList();
        var list = companies.Select(item => new SearchJsonModel
                                                {
                                                    LogoUrl = item.Logo != null || item.Logo != "" ? "<img  src='/Upload/" + item.Logo + "' />" : "<img src='/home/image?image=" + item.Name + "' />", Name = item.Name, Value = item.InternetName
                                                }).Select(model => (model)).ToList();
        return Json(list, JsonRequestBehavior.AllowGet);
    }

SearchJsonModel :

 public class SearchJsonModel
{
    public string Name { get; set; }
    public string Value { get; set; }
    public string LogoUrl { get; set; }
}

Please ask me if you need more detail and thanks in advance .

possible duplicate of jQuery AutoComplete multiple Output

tpeczek
– tpeczek

2012-10-25 08:56:55 +00:00
Commented Oct 25, 2012 at 8:56 — tpeczek
– tpeczek, Commented Oct 25, 2012 at 8:56

kidz · Accepted Answer · 2012-10-25 08:52:05Z

0

To get the Name, Value, LogoUrl, please set those in response like this:

response($.map(data, function (item) {
                        alert(item.Value);
                        return {
                            label: item.Name,
                            value: item.Name
                            LogoUrl: item.LogoUrl,
                            Name: item.Name 
                        };

answered Oct 25, 2012 at 8:52

kidz

3081 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

Jquery-ui Autocomplete select Call back function is not working properly

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related