ASP.NET MVC 4 jQuery autocomplete problems

Question

I am new to MVC and trying to get autocomplete working on a textbox to return suggested MemberNames. I have two problems (Problem1 - getting the user's initial text characters into the controller, and Problem2 - getting returned controller list of names to appear below the text box).

View:

@section scripts{ 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#autocomplete").autocomplete({ source: '@Url.Action("MemberList", "Grievances", new { autocomplete = $("#autocomplete").val() })' });
    });     
    </script>
}
...
<input id="autocomplete">

Problem1 - In the above View, if I do not put in the 3rd parameter for @Url.Action, my controller receives null for parameter value (even though a bunch of websites tell me autocomplete automatically binds this value, it's not doing it).

If I put in a hardcode for the 3rd parameter, like this:

new { autocomplete = "ead" }

then the controller receives "ead" as parameter value. If I put in the code as it is in the code block above, the website errors out, complaining of "Unexpected character '$'" in the 3rd parameter.

Question1 - How can I pass the value of the autocomplete text box into the controller?

Problem2 - Here is my controller code

public ActionResult MemberList(string autocomplete)
{
var memberNames = (from p in context.Members
                   where p.MemberName.Contains(autocomplete)
                   select p.MemberName).Distinct().Take(10);
string content = string.Join<string>("\n", memberNames);
return Content(content);
}

When I hard code a value (like 'ead') into the 3rd parameter in the view above, then I get the value here in the controller. The Controller retrieves a list of appropriate records from the database, and I return it back to the View. However, nothing shows up under the text box. I do have the necessary JavaScript and CSS files included in the View; if I hard code a list of values, they do show up appropriately under the text box. It's only the controller that it can't get the results from.

Question2 - How do I get the controller to return a list of values so the autocomplete text box will show them?

Your help with these 2 problems is greatly appreciated. I feel like I'm just spinning my wheels in the mud getting autocomplete to work.

Answer 1

Answer to Q1

You are mixing jQuery ($("#autocomplete").val()) and Razor (@Url.Action("MemberList", ...) together in the following line. Razor runs on Server whereas jQuery executes on client hence the error.

'@Url.Action("MemberList", "Grievances", new { autocomplete = $("#autocomplete").val() })'

You don't need the third parameter in your URL. You'll probably get the user enter in parameter name q or 'term' . See documentation for it

public ActionResult MemberList(string q)
{
 ...
}

Answer to Q2

You should not return an HTML view in response to auto complete. You should return List (Array) of values as JSON instead.

public JsonResult MemberList(string autocomplete)
{
   var memberNames = (from p in context.Members
                   where p.MemberName.Contains(autocomplete)
                   select p.MemberName).Distinct().Take(10);
   //string content = string.Join<string>("\n", memberNames);
   return Json(memberNames.ToList(), JsonRequestBehavior.AllowGet);
}