Autocomplete Textbox Using Database Return Value in ASP.NET Mvc Razor With Jquery

Now in my MVC3 application I have a model class named "student.cs" where I will store some student information.
    public class Student    {
        public int StudentID { get; set; }
        public string LastName { get; set; }
        public string FirstMidName { get; set; }
        public DateTime EnrollmentDate { get; set; }
 
    }

Also I have a controller class named "studentController.cs" under the controller folder.

Now for the studencontroller class I have an opening page in razor named "index.cshtml".

In this page I have a textbox where the user will enter the "firstname" of the student and it will give like autoextender features.

See the following code where I am catching the user data:
@using (Html.BeginForm()) 
{ 
    <p> 
        Find by name: @Html.TextBox("SearchString")   
        <input type="submit" value="Search" /></p> 
}
Now we have to handle the textbox enter event in our student controller class.

For that we have to write a particular ActionResult name "AutocompleteSuggestions" in our "studentController.cs" class.

See the following code:
public JsonResult AutocompleteSuggestions(string searchstring)
{    private SchoolContext db = new SchoolContext();

    var suggestions = from s in db.Students
                              select s.FirstMidName ;
    var namelist = suggestions.Where(n => n.ToLower().StartsWith(searchstring.ToLower()));

    return Json(namelist, JsonRequestBehavior.AllowGet);
}

See here I have used "Jsonresult" instead of "ActionResult". That means the return data will be in a json format.

The searchstring is the user input text in the textbox.

Here my "SchoolContext" is the Entityframework database name.

After that I query the "Student" model class and get the firstname.

After that I query the "suggestions" variable with Lamdaexpression and check the "StartWith" method (marked as yellow) with our user given searchstring.

Finally we are returning with Jsonformat.

Next Step:

Now we have to write the Jquery code for the autocomplete extender property in to our "indesx.cshtml" file.

Please see the following code:
<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><script type="text/javascript">    $(function () {

        $("#SearchString").autocomplete({
            source: "/Student/AutocompleteSuggestions",
            minLength: 1,
            select: function (event, ui) {
                if (ui.item) {
                    $("#SearchString").val(ui.item.value);
                    $("form").submit();
                }
            }
        });
    });</script>

That's it. Now after running the application it will look like the following image:



I have typed "s" and it is displaying all students beginning with 's' in the first name in the autocomplete extender property.