How to Map data in jquery-ui autocomplete is not working

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 , but suggestions is not showing in dropdown

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) {
                log(ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
            },
            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; }
}

and this is what i am getting in response of ajax call ( this is the image of firebug )

enter image description here

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

Edit

now i am trying to access selected value in select callback but its giving Undefined

select: function (event, ui) {
           alert(ui.item.Name);
                alert(ui.item.Value);
                alert(ui.item.LogoUrl);
        },

tpeczek · Accepted Answer · 2012-10-25 07:37:38Z

4

You have defined your dataType as jsonp but it looks like you are returning standard json, try changing your dataType:

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

answered Oct 25, 2012 at 7:37

tpeczek

24.2k3 gold badges78 silver badges78 bronze badges

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

3 Comments

smart boy Over a year ago

and what is the difference between Json and Jsonp ?

tpeczek Over a year ago

@smartboy I do believe that Wikipedia explains it good enough: JSONP, JSON

tpeczek Over a year ago

@smartboy This is a little bit more complicated, as the actual item from your response is not hold by autocomplete. In order to achieve that you need to override the internal _renderItem function. Please refer to following answer for a sample: stackoverflow.com/questions/12855617/… (don't forget to upvote with the up arrow on the left if the answer helps you).

maxs87 · Accepted Answer · 2012-10-25 07:33:35Z

im not sure what is wrong in ur code but may be u can try another more simple way to do autocomplete? Like

$(document).ready(function () {
    $(":input[dataautocomplete]").each(function () {
        $(this).autocomplete({
            source: $(this).attr("dataautocomplete"),
            minLength: 2,
            select: function (event, ui) {
                //do anything u need
                //get ur name  ui.item.Name
                //get ur URL   ui.item.LogoUrl
            }
        });
    });
});

html like

<input  class="ui-autocomplete-input" type="text" value="" name="post" dataautocomplete="@Url.RouteUrl("default", new { controller = "somecontroller", action = "someaction" })" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" />

Collectives™ on Stack Overflow

How to Map data in jquery-ui autocomplete is not working

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related