Autocomplete Textbox in Razor View Engine Using JQuery in ASP.NET MVC 3

Suppose we are building a contact group application in ASP.NET MVC3 using razor view engine.

Here one contact group can hold multiple contact information. That means it is a 1 to many relationship.

Now we have 2 model classes.

1. Group
2. Contact

Under the controller folder we have one controller class named "groupcontroller.cs".

Now under the "view" folder we have a different view.

Now we have to deal with "create.cshtml".

Here while typing your group name it will automatically show a possible group name like {friend,family,twiter friend,company e.t.c}.

So for that first we have to include the Jquery in our "create.cshtml" file like in the following code:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="../../Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"
type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>

Now in the razor view engine we are displaying and taking the group name value like in the following code segment:

<fieldset>
<b><font color="red">Enter Your Group Name on which you will insert your Contact Information</font></b>
<div class="editor-label" >
@Html.LabelFor(model => model.Group.GroupName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Group.GroupName)
@Html.ValidationMessageFor(model => model.Group.GroupName)
</div>
</fieldset>