JQuery Autocomplete and ASP .NET MVC database as data source

Question

Hello,

I have got this working with a local data source but not remotely. It uses the Jquery library and I have followed the instructions on the Jquery UI site. This is the code I have (which does not work). Can anyone a) amend this code to work b) show code of a working example?? Thanks:

JQUERY

  $('#countries').autocomplete({
         source: "/Trip/Lookup",
         minLength: 0,
         focus: function (event, ui) {
             $('#countries').val(ui.item.label);
             return false;
         },
         select: function (event, ui) {
             return false;
         }
  }).data("autocomplete")._renderItem = function (ul, item) {
      return $("<li></li>")
          .data("item.autocomplete", item)
          .append("<a>" + item.label + "</a>")
          .appendTo(ul);
  };

ACTIONRESULT

    public ActionResult Lookup(string q, int limit)
    {
        List<DestinationVM> list = new List<DestinationVM>();
        list.Add(new DestinationVM { Destination = "England", Cost = 12 });
        list.Add(new DestinationVM { Destination = "New Zealand", Cost = 10 });
        list.Add(new DestinationVM { Destination = "Australia", Cost = 8 });

        var data = from s in list select new { s.Destination, s.Cost };

        return Json(data);
    }

Answer 1

You should use the Firebug plugin for Firefox. You'll be able to see any errors in the Net > XHR tab.

Answer 2

Change your action definition to look like this:

public ActionResult Lookup(string term)

The autocomplete plugin sends a request with a query parameter called term which contains the characters that the user has typed into the text box so far.

Also, try changing your Linq projection to this:

var data = from s in list select new { label = s.Destination, value = s.Cost };

The autocomplete plugin expects either a flat array of values or an array of JSON objects which have a label and value property.

Answer 3

The action on the controller was wrong. It should have been:

The changes are in the input parameter and the inclusion of the return parameter JsonRequestBehavior.AllowGet. It now works.

    public ActionResult Lookup(string term)
    {

        var result = _TripRep.GetAutoCompleteDestination(term, 5);

        var data = from s in result select new { label = s.Destination, value = s.Cost };

        return Json(data, JsonRequestBehavior.AllowGet);

    }