Question

I am using the jQuery Autocomplete Plugin (by Jörn Zaefferer of jQuery fame).

BackEnd Code:

public JsonResult GetCompanyNames()
    {
        return Json(Model.CompanyNames); //returns valid JSon
    }

Relevant JS Code:

$('#CompanyName').autocomplete(['Suzuki', 'Honda', 'blah']); //This works fine
$('#CompanyName').autocomplete('/Account/Login/GetCompanyNames'); //This renders icons!

While passing a Javascript Array as url/data parameter it works fine as predicted.

But when I passed a Area/Controller/Action as parameter it shows me jQuery’s ui-icons (huh?) in the corresponding textbox!!?

Yes, I wish I could attach a screenshot. Trust me, I still can’t believe my eyes either.

While debugging, I have verified that my method returns valid JsonResult data. I’m using using: ASP.NET MVC3, jQuery 1.4.2. I have checked and found the same behaviour across Chrome 6.0, IE8 and and Firefox 3.5

UPDATE : The icons appear even before the autocomplete request returns from the server.

Answer 1

Make sure to allow GET requests:

public ActionResult GetCompanyNames()
{
    return Json(Model.CompanyNames, JsonRequestBehavior.AllowGet);
}

Another tip: Use FireBug to see what’s exactly being exchanged between the client and server and any possible error messages.

---

UPDATE:

The problem comes from the fact that you need to manually parse the JSON by using the parse and formatItem functions because the plugin expects the data to be formatted in a special way:

$('#CompanyName').autocomplete('/Account/Login/GetCompanyNames', {
    dataType: 'json',
    formatItem: function (data, i, max, value, term) {
        return value;
    },
    parse: function (data) {
        return $.map(data, function (item) {
            return { data: item, value: item, result: item };
        });
    }
});