Cant get Jquery ui autocomplete widget to work

Question

Im trying to develop my first ASP.NET MVC web app and have run into a problem with the jquery ui autocomplete widget.

At the moment I have a form with a number of text boxs which would lend themselves well to an autocomplete ability.

The code for my "Make"(Car make) text box is show below:

jquery:

$(function() {
     $("#Make").autocomplete({
          source: '<%=Url.Action("Make","AutoComplete") %>' 
     });
});

ASP.NET MVC controller:

public ActionResult Make(string term)
{
    return Json(Service.GetHints(HintType.Make, term, 20));
}

GetHints() returns an IList of Hints, an object with just label and value string properties. The documentation implies that this is what I should be returning to the jquery but it doesnt want to work? Can anyone give me any advice/help?

Answer 1

I have had this problem too. You will need to change your ActionResult to JsonResult

There has been a change to JsonResult in MVC 2 and therefore it will no longer work with HTTP GET to avoid JSON hijacking.

So you could either change your code to return via HTTP POST or allow GET behaviour which may leave you open to JSON hijacking.

Try modifying your code to follow the format

return Json(data, JsonRequestBehavior.AllowGet);

so your code will look like

public JsonResult Make(string term)
{
    return Json(Service.GetHints(HintType.Make, term, 20), JsonRequestBehavior.AllowGet);
}