jQueryUI + ASP .NET MVC autocomplete with json data

Question

I have really big problem with calling JSON with jQueryUI autocomplete. I have this fairly simple JS:

$(document).ready(function() {
    $('#Editor_Tags').autocomplete({
        source: "/Forums/Ajax/GetTags",
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.TagName);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    });
});

And this is model I'm trying to return:

public class TagView
{
    public int TagId { get; set; }
    public string TagName { get; set; }
    public int Weight { get; set; }
}

But that's not the main issue. Main issue is, When I start typing, jQuery do not make request to controller. I'm 100% sure, that the Url speciefied is good. Because I can manually access to controller by typing /Forums/Ajax/GetTags?term=text And I get results for it. I'm using newset version of jQuery and jQUI directly rom google CDN.

@Lukasz Baran: Do you see any JavaScript errors on the page? What happens when you open the console tab in Firebug? Is any request being sent at all? — Andrew Whitaker
– Andrew Whitaker, Commented Jul 2, 2011 at 13:35
in firebug console, it looks fine, and request retrive data, but on other hand in Fiddler I do not get any result for ajax call. — Łukasz Baran
– Łukasz Baran, Commented Jul 2, 2011 at 13:42

Andrew Whitaker · Accepted Answer · 2011-07-02 13:56:58Z

The jQueryUI autocomplete widget expects data in the source parameter to meet the following requirements:

[..] a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both.

So you have two options:

Change the viewmodel you're serializing to JSON to meet those requirements:

public class TagView
{
    public string Label { get; set; }
    public string Value { get; set; }
}

Change the autocomplete widget's source parameter to be a function in which you perform the AJAX call yourself and format the data appropriately:

$("#Editor_Tags").autocomplete({
    source: function (request, response) {
        $.getJSON("/Forums/Ajax/GetTags", { term: request.term }, function (data) {
            response($.map(data, function (el) {
                return {
                    label: el.TagName,
                    value: el.TagId
                };
            }));
        });
    },
    /* other autocomplete options */
});

This is assuming that the data returned from the server is a JSON array of TagView objects.

The second piece of code is untested, but it should at least get you in the right direction.

Łukasz Baran · Accepted Answer · 2011-07-02 14:49:15Z

0

I have got it working with this code:

    $('#Editor_Tags').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Forums/Ajax/GetTags",
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
                response($.map(data, function (item) {
                    return {
                        label: item.TagName,
                        value: item.TagName
                    }
                }));
            }
        });
    }

});

Which essentialy is not that diffrent from what Andrew have posted.

answered Jul 2, 2011 at 14:49

Łukasz Baran

1,2393 gold badges24 silver badges48 bronze badges

Collectives™ on Stack Overflow

jQueryUI + ASP .NET MVC autocomplete with json data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related