Why doesn't my autocomplete work MVC3 Razor Engine - asp.net-mvc-3

Question

I using code from this blog Autocompletion Textbox in MVC Using jQuery
but my jQuery isn't firing. I suspect its to do with my selector. I am using MVC as well but I don't see how that would make the javascript any different.
Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using UserManager.Models;
namespace UserManager.Controllers
{
public class UserManagerController : Controller
{
//
// GET: /UserManager/
public ActionResult Index()
{
try
{
var data = new UserManager.Models.UserManagerTestEntities();
return View(data.vw_UserManager_Model_Add_Users.ToList());
}
catch (Exception ex)
{
return View(ViewBag);
}
}
public ActionResult CreateUser()
{
var data = new UserManager.Models.UserManagerTestEntities();
ViewBag.Message = "Create New User";
return View();
}
public ActionResult LookUpGroupName(string q, int limit)
{
//TODO: Map list to autocomplete textbox control
DAL d = new DAL();
List<string> groups = d.groups();
var GroupValue = groups
.Where(x => x.StartsWith(q))
.OrderBy(x => x)
.Take(limit)
.Select(r => new { group = r });
// Return the result set as JSON
return Json(GroupValue, JsonRequestBehavior.AllowGet);
}
}
}
#model UserManager.Models.vw_UserManager_Model_Add_Users
#{
ViewBag.Title = "Create New User";
}
<h2>
CreateUser</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>New User Details</legend>
<div class="editor-label">
#Html.LabelFor(Model => Model.salutation)
</div>
<div class="editor-field">
#Html.EditorFor(model => Model.salutation)
#Html.ValidationMessageFor(model => Model.salutation)
</div>
<div class="editor-label">
#Html.LabelFor(Model => Model.firstname)
</div>
<div class="editor-field">
#Html.EditorFor(model => Model.firstname)
#Html.ValidationMessageFor(model => Model.firstname)
</div>
<div class="editor-label">
#Html.LabelFor(Model => Model.lastname)
</div>
<div class="editor-field">
#Html.EditorFor(model => Model.lastname)
#Html.ValidationMessageFor(model => Model.lastname)
</div>
<div class="editor-label">
#Html.LabelFor(Model => Model.password)
</div>
<div class="editor-field">
#Html.EditorFor(model => Model.password)
#Html.ValidationMessageFor(model => Model.password)
</div>
<div class="editor-label">
#Html.LabelFor(Model => Model.email)
</div>
<div class="editor-field">
#Html.EditorFor(model => Model.email)
#Html.ValidationMessageFor(model => Model.email)
</div>
<div class="editor-label">
#Html.LabelFor(Model => Model.isactive)
</div>
<div class="editor-field">
#Html.EditorFor(model => Model.isactive)
#Html.ValidationMessageFor(model => Model.isactive)
</div>
<div class="editor-label">
#Html.Label("Group Name")
<!-- GroupName -->
</div>
<div class="editor-field">
#Html.EditorFor(model => Model.group_name)
#Html.ValidationMessageFor(model => Model.group_name)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<div>
#Html.ActionLink("Back to List", "Index")
</div>
}
<script type="text/javascript">
$(document).ready(function () {
$("#group_name").autocomplete('#Url.Action("LookUpGroupName")',
{
dataType: 'json',
parse: function (data) {
var rows = new Array();
alert("before loop");
for (var i = 0; i < data.length; i++) {
rows[i] = { data: data[i], value: data[i].group, result: data[i].group }
}
return rows;
},
formatItem: function (row, i, max) {
return row.group
},
width: 300,
highlight: false,
multiple: true,
multipleseparator: ","
});
});
</script>
HTML rendered to browser:
<input name="group_name" class="text-box single-line" id="group_name" type="text" value=""/>
Probably something simple I just cant see it. Any ideas? Thanks!

Answer 1

I don't believe #Html.EditorFor(model => Model.group_name) adds and ID to the element it creates, therefor your selector will not match. You could add an ID like this:
#Html.EditorFor(model => Model.group_name, new { ID = "group_name"})
In addition, if you wan't to select on an ID with jquery it is better to use the ID-selector #group_name instead, unless you actually have a number of elements where the ID actually start with group_name for all of them, and you want to select all of the elements at once.
Update
You use the attribute start with selector input[id^=group_name, and have a typo in it. You are missing the closing ] in your selector. Even so, if you don't intent to select multiple elements that all have ID's that start with group_name, which your markup indicate that you don't. Then you should really use the ID selector instead.

Answer 2

Do a test run with this
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"Scala",
"Scheme"
];
$( "#group_name" ).autocomplete({
source: availableTags
});
});

Answer 3

When using MVC3 Razor this syntax will not work:
$("#postTags").autocomplete('<%=Url.Action("LookUpGroupName",) %>',
This is because Razor Engine doesn't understand WebForms Engine Syntax. Instead I used:
$("#group_name").autocomplete('#Url.Action("LookUpGroupName")',
I used the overloaded method which accepts ActionResult name only. This worked for me but you if your solution is setup differently you might have to supply both Controller and ActionResult arguements.
Finally I was getting error code 500 when my AJAX request was being made. This is because in my LookUpGroupName method I had to refactor this line of code:
return Json(GroupValue);
To:
return Json(GroupValue, JsonRequestBehavior.AllowGet);
My original post has all the correct code for anybodys future reference.