JQuery autocomplete results don't appear

I am creating an autocomplete field in ASP.net MV开发者_如何学运维C 2. The problem is the input field just spins and no autocomplete data or "no results" messages appear.

I have a Search controller that retrieves LastNames from a database using a LIKE statement. This controller is called from the JavaScript function below:

 $('#author').autocomplete('~/edit/search.mvc', {
    delay: 200,
    minChars: 2
});

This all works fine. I can debug into the Search controller and it is passing search text (q) and fetching results all the way through to the return statement. The controller is below.

//Method to return author searches
public JsonResult Search(string q)
{
    var locateFacultyDto = new LocateFacultyMemberDto() { SearchText = q };
    var result = _facultyMemberModel.LocateFacilityMembersByLastNameLike(locateFacultyDto, 10);

    var lastNames = new List<string>();

    foreach (var facultyMember in result.FacultyMembers)
    {
        lastNames.Add(facultyMember.LastName);
    }


    return Json(lastNames, JsonRequestBehavior.AllowGet);
}

But then in the HTML (Spark) page no results appear. I have a really simple Text input:

 <input id="author" type="text" />

Any ideas? I can't debug any further than the end of the Search controller, but everything seems fine up to that point.

I would suggest using firebug in firefox look at what the actual response coming back is.

OK, I figured it out thanks to the following post and the comments above:

http://blogs.msdn.com/b/joecar/archive/2009/01/08/autocomplete-with-asp-net-mvc-and-jquery.aspx

Posting the resulting code in case it helps someone else.

Javascript: This calls the 'Search' method in the 'Edit' controller (details below). Adding the "Parse" function was the key, which is explained in the link I provided above:

The trick is to convert this data to a format that the autocomplete function is expecting. If you are using local data, autocomplete expects an array of strings. Since our data is in the form of a JSON object, we will use the parse option to format our JSON object into data that the autocomplete function can work with.

The parse function is not documented very well but it basically will take our JSON object and return an array of objects that consist of three mandatory parts:

1. data: this is an entire item in my JSON object: {"ID":13,"Name":"test3","Count":1}

2. value: this is the value I want displayed: test3

3. result: this is the value I want added to my input (txtStoryTags) after I select the tag from the dropdown: test3

The complete Javascript function:

$('#author').autocomplete('~/edit/search.mvc', {
    dataType: 'json',
    parse: function(data) {
      var rows = new Array();
      for (var i = 0; i < data.length; i++) {
        rows[i] = {data: data[i], value: data[i].Name, result: data[i].Id };
     }
      return rows;
  },
  formatItem: function(row) {
     return row.Name;
  },
 delay: 40,
 autofill: true,
 selectFirst: false,
 highlight: false,
 minChars: 2
});

The ASP.net MVC 2 Controller:

    //Method to return author search results as JSON
    public JsonResult Search(string q) //autocomplete passes a variable 'q' containing the search text
    {
        var locateFacultyDto = new LocateFacultyMemberDto() { SearchText = q };
        var authors = _facultyMemberModel.LocateFacilityMembersByLastNameLike(locateFacultyDto, 10);

        var results = new List<Object>();  //All we need is the name and ID
        //anonymnous object for JSON result.  
        foreach (var author in authors.FacultyMembers)
        {
            results.Add(new
            {
                Name = (author.LastName + ", " + author.FirstNames), 
                Id = author.Id
            });
        }

Viola! Autocomplete lists user names in the search results, and upon selecting a name inserts the ID into the field, which is simply:

 <input id="author" type="text" />

Thanks everyone!