Part 97 Implement autocomplete textbox functionality in mvc

Link for code samples used in the demo

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

Step 1: We will be using tblStudents table in this demo.

Step 5: Right click on the "Controllers" folder and add "Home" controller. Copy and paste the following code. Please make sure to include "MVCDemo.Models" namespace.
public class HomeController : Controller
{
public ActionResult Index()
{
DatabaseContext db = new DatabaseContext();
return View(db.Students);
}

[HttpPost]
public ActionResult Index(string searchTerm)
{
DatabaseContext db = new DatabaseContext();
List[Student] students;
if (string.IsNullOrEmpty(searchTerm))
{
students = db.Students.ToList();
}
else
{
students = db.Students
.Where(s =] s.Name.StartsWith(searchTerm)).ToList();
}
return View(students);
}

public JsonResult GetStudents(string term)
{
DatabaseContext db = new DatabaseContext();
List[string] students = db.Students.Where(s =] s.Name.StartsWith(term))
.Select(x =] x.Name).ToList();
return Json(students, JsonRequestBehavior.AllowGet);
}
}

Step 6: Right click on the "Index" action method in the "HomeController" and add "Index" view. Copy and paste the following code.
@model IEnumerable[MVCDemo.Models.Student]

[script type="text/javascript"]
$(function () {
$('#txtSearch').autocomplete({
minLength: 1
});
});
[/script]

[div style="font-family:Arial"]
{
[label for="Name"]Name: [/label]
@Html.TextBox("searchTerm", null, new { id = "txtSearch" })
[input type="submit" value="Search" /]
}

[table border="1"]
[tr]
[th]
@Html.DisplayNameFor(model =] model.Name)
[/th]
[th]
@Html.DisplayNameFor(model =] model.Gender)
[/th]
[th]
@Html.DisplayNameFor(model =] model.TotalMarks)
[/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.TotalMarks)
[/td]
[/tr]
}
[/table]
[/div]

[rajar.u.m]

Very Good Explanation, each word is gives great stuff. we should not miss any thing in the video series.

[Csharp-video-tutorialsBlogspot]

Thank you very much for taking time to give feedback. In the description of this video, I have included the link for ASP .NET, C#, and SQL Server playlists. All the videos are arranged in logical sequence in these playlists, which could be useful to you. Please share the link with your friends who you think would also benefit from them. If you like these videos, please click on the THUMBS UP button below the video. For email alerts, when new videos are uploaded, you may subscribe to my channel.

[casper]

Awesome explaining, i used this in an Umbraco site i created for a client and got it to work. I will deffinantly be covering this in my Umbraco Tutorials :) Keep at it!

[robsonfaxas]

Thank you very much! I've been searching specifically these tips! Another great video Pragim! :)

[aliazad]

As usual perfect. Thanks a lot for your time and helpful tutorials.

[Tagmesam]

really you are awesome sir your teaching technique is really good this video makes lots of help to me

[SamOnSTEM]

Fantastic series. Thank you so much for your time!

[ymtan]

Hi Venkat, thank you very much for such an exceptional and fantastic ASP.NET MVC tutorial on autocomplete features for textbox. However, may I suggest that you do make an ASP.NET video on this autocomplete features too.

[mehmetaliebleme]

Thank you very much. It was very clear and deep.

[Csharp-video-tutorialsBlogspot]

Hi Akhil, sure, will do it as soon as I can.

[sekharmaddi]

Hi For ur Videos....These R Very Very Useful..I Became UR Fan..

Can u please Explain - How to use Multiple Buttons in a single Form In MVC....

Cada vídeo es excelente. Gracias por compartir =)

[abhishekdeshwal]

Hi Virender,

Looking at a smaller picture, there are certain advantages of MVC over asp.net. To learn more, you can google it out.

Looking at a bigger picture, webforms and mvc are essentially the same. Both of them have remarkably similar features. There is virtually nothing that you can not implement using webforms which you can achieve with mvc.

If you have been following Venakt's ASP.net series, you will understand that both are nearly same.

Regards,
Abhishek

[Wowokissy]

I download the current jquery 1.10.version and it doesn't work for me this way. It breaks the jquery autocomplete function with the message:
JavaScript runtime error: Object doesn't support property or method 'autocomplete'

[ACLAproductions]

Little tip for those having problems: If you're using an external js file, you must hardcode the url (eg: '/Students/GetStudents/') instead of using Url.Action() because it won't be recognized, since it's C# code.

[akhilb]

Hi Venkat,
If possible could u make some videos on Threading . In my point of view this topic is little bit confusion in C# as like delegates
Thanks

[nirukumari]

Thanks for video. Is it good to call database user/other table to populate the items for every search? will it impact my existing application performance.

[Udeshitha]

Can you suggest me, How to pass two values into the controller using the term? I need to pass the current typing string and existing string to return a result?

[jonathanbuenviaje]

Very nice tutorial, however I'm having a problem about making the AutoComplete work in my project. I'm using MVC5. I've followed everything properly using the Json part. I'm not sure if the problem is on jQuery or on my Controller. 

[waqasadil]

can you make this video in mvc 5 using visual studio 2013?