Create DropdownListFor + AutoComplete in ASP.Net MVC 5

Question

Hi, I need to create a DropDownListFor with AutoComplete on user input, in ASP.Net MVC 5 i get a list of ID,Language from a sql database table vaules, for that i need to generate a dropdownlist which is just like in jquery combobox. (URL: https://jqueryui.com/resources/demos/autocomplete/combobox.html) How can i achive this in ASP.Net MVC 5 Razor view? using DropDownListFor?

Sanwar Ranwa · Answer

Hello Please check this Link https://www.aspsnippets.com/Articles/Implement-jQuery-AutoComplete-DropDown-ComboBox-in-ASPNet-MVC.aspx https://www.c-sharpcorner.com/UploadFile/0c1bb2/creating-autocomplete-textbox-in-Asp-Net-mvc-5/

Suraj Kumar · Answer

Try the following code for autocomplete textbox in asp.net mvc @Html.TextBoxFor( model = > model.CategoryID) @section scripts{ script src = "~/Scripts/jquery-ui-1.12.1.js" > script > link rel = "stylesheet" href = "http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" > script > $(function () { $("#CategoryID").autocomplete({ source: function (request, response) { $.ajax({ url: '@Url.Action("AutoComplete")', datatype: "json", data: { term: request.term }, success: function (data) { response($.map(data, function (val, item) { return { label: val.Name, value: val.Name, CategoryId: val.ID } })) } }) }, select: function (event, ui) { $.get("/Home/GetSProductList", { CategoryID: ui.item.CategoryId }, function (data) { $("#ProductID").empty(); $.each(data, function (index, row) { $("#ProductID").append(" option value = '" + row.ProductID + "' > " + row.ProductName + " option > ") }); }); } }) }) script > } In action write the following code with modified table as per in your database and column name. The same should be changed in above jquery code. public ActionResult AutoComplete( string term) { if (!String.IsNullOrEmpty(term)) { var list = db.Categories.Where(c=>c.CategoryName.ToUpper().Contains(term.ToUpper())).Select(c => new { Name = c.CategoryName, ID = c.CategoryID }) .ToList(); return Json(list, JsonRequestBehavior.AllowGet); } else { var list = db.Categories.Select(c => new { Name = c.CategoryName, ID = c.CategoryID }) .ToList(); return Json(list, JsonRequestBehavior.AllowGet); } } You can check with the below link for more help https://forums.asp.net/t/2132972.aspx?HOW+TO+CREATE+AUTOCOMPLETE+DROPDROWN+LIST+IN+ASP+NET+MVC5+VIEW+ Hope this will help you.

Antony Judes · Answer

Thank you Sanwar Ranwa!. i will try and contact u. thank you very much.