Autocomplete textbox functionality using Jquery and Asp.net MVC

create table student (
Id int, 
Name varchar(50),
Gender varchar(50),
City varchar(50)
)

Insert into student values(1,'Sara','Female','Chennai')
Insert into student values(2,'David','Male','Sydeny')
Insert into student values(3,'Dora','Female','New York')
Insert into student values(4,'Maya','Female','London')
Insert into student values(5,'Vikram', 'Male','Mumbai')
Insert into student values(6,'Nikhil','Male','Delhi')

• Open Visual Studio.
• Click on File -> New -> Project.
• In this project, I am using C# as a programming language, but you can also choose VISUAL BASIC if you know syntaxes of VB.
• Inside Visual C# -> Web -> Project -> Select Asp.Net MVC 3, 4 or 5 -> Select Ok
• Now one more dialog box would open -> select Empty as a project template. -> OK.

• After creating MVC project, you will find list of your project file inside ‘solution explorer’ on your right hand side.

Step 2 : Create an ADO.NET Entity Data Model

• Right click on your project name -> Add -> New Item.

• Inside ‘Add New Item’ pop up search and select Ado.Net entity data model- > Name your data model as ‘StudentDataModel’ -> Click Add

• Next on entity data model -> select generate from database -> click next
• Next select database connection using new connection button and name your web.config as ‘SampleDBContext’ -> click next

• Select table from dbo and name your model namespace as ‘Models’ -> click finish

Step 3 : Add new controller

• Right click on controller folder. Name your controller -> HomeController -> Click on Add button.

• Add following three methods inside home controller
• Index get method

[HttpGet]
      public ActionResult Index()
      {
          StudentDbContext DbContext = new StudentDbContext();             
          return View(DbContext.students);
      }

• Index post method

[HttpPost]
        public ActionResult Index(string searchterm)
        {
            StudentDbContext DbContext = new StudentDbContext();
            List<student> students;
            if (string.IsNullOrEmpty(searchterm))
            {
                students = DbContext.students.ToList();
            }
            else
            {
                students = DbContext.students.Where(x => x.Name.StartsWith(searchterm)).ToList();
            }
            return View(students);
        }

• Getstudents method

public JsonResult Getstudents(string term)
        {
            StudentDbContext DbContext = new StudentDbContext();
            List<string> students;

            students = DbContext.students.Where(x => x.Name.StartsWith(term)).Select(y => y.Name).ToList();

            return Json(students, JsonRequestBehavior.AllowGet);
        }

Step 4 :Add view

• Add follwing code in index view

@model IEnumerable<AutocompleteTextboxDemo.Models.student>

@{
    ViewBag.Title = "Index";
}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript">

    $(function () {
         
        $("#txtsearch").autocomplete({
            
            source: '@Url.Action("Getstudents")'

        });

    })


</script>

<h2>Student Details</h2>


@using (@Html.BeginForm())
{ 
   <b> Student Name </b>
        @Html.TextBox("searchterm", null, new { id="txtsearch"})

        <input type="submit" value="Search" />
}
<table style="border:1px solid">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Gender)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.City)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Gender)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.City)
        </td>
      
    </tr>
}

</table>

Step 5 : Press F5 and see result