JQuery Autocomplete and ASP .NET MVC database as data source

Question

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);
    }

possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Sep 10 '15 at 13:49

joshperry · Answer 1 · 2010-08-12T20:15:51.017

0

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.

edited Aug 12 '10 at 20:15

answered Aug 12 '10 at 19:03

joshperry

41,167
16
88
103

@user Updated the answer for another fix that you'll need to make. – joshperry Aug 13 '10 at 19:12

score 0 · Answer 2 · answered Aug 12 '10 at 19:46

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);

    }

JQuery Autocomplete and ASP .NET MVC database as data source

2 Answers2