MVC3 Razor jQuery autocomplete passes Back values but nothing displays

Question

I'm having trouble with my auto complete functionality, it hits the controller and returns the values but nothing is displayed on the page, I have provided the code below any help is appreciated.

HomeControllerMethod

[HttpPost]
    public JsonResult  GetAccounts(string id)
    {
        var accounts = NavRepository.GetAccountsBasedOnString(id);

        return Json(accounts, JsonRequestBehavior.AllowGet);
    }

About.cshtml

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">      </script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript">      </script>


<script type="text/javascript">
$(function () {
    $('#searchTerm').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetAccounts", "Home")',
                data: { id: request.term },
                dataType: 'json',
                type: 'POST',
                minLength: 3,
                success: function (event, ui) {
                    searchTerm.valueOf (ui.item.value);
                }
            });
        } 
    });
});

</script>

@using (Html.BeginForm())
{               
<form method="post" action="">
 <input id="searchTerm" name="searchTerm" type="text" />
     <input type="submit" value="Go" />
 </form>
} 

Edit: Below is my final function

  $(function () {
    $('#searchTerm').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '@Url.Action("GetAccounts", "Home")',
                data: { id: request.term },
                dataType: 'json',
                type: 'POST',
                minLength: 3,
                success: function (data) {
                    response(data); ;
                }
            });
        } 
    });
});

Answer 1

A few things:

1. You need to call the response function that the widget supplies to the source function you provide. Also, it looks like you have one of the autocomplete's options (minLength) mixed in with the AJAX call:

   $('#searchTerm').autocomplete({
       source: function (request, response) {
           $.ajax({
               url: '@Url.Action("GetAccounts", "Home")',
               data: { id: request.term },
               dataType: 'json',
               type: 'POST',
               success: function (data) {
                   response(data); // You may have to perform post-processing here depending on your data.
               }
           });
       },
       minLength: 3
   });
   

2. Additionally, make sure that you're supplying the widget with the data it expects. You need to supply the response function with an array of strings, e.g:

   ["Item1", "Item2", "Item3"]
   

   Alternatively, you can supply an array of objects with a label property, a value property, or both:

   [{ label: "Item1", value: "1" }, { label: "Item2", value: "2" }]
   

   You may already be doing this, but I would have to see what your controller action returns.