Selecting the Key value of the selected item in AutoComplete Text box.

Question

How should I send the Key value of the selected item in AutoComplete Textbox to controller instead of the Text value?

Pankaj Patel · Answer

Hi Gopi, Try following: Index.cshtml @model WebApplication2.Controllers.City @{ Layout = null; } $(document).ready(function () { $("#Name").autocomplete({ source: function (request, response) { $.ajax({ url: "/Home/Index", type: "POST", dataType: "json", data: { Prefix: request.term }, success: function (data) { response($.map(data, function (item) { return { label: item.Name, value: item.Name, id: item.Id }; })) } }) }, minLength: 2, select: function (event, ui) { alert("Selected: " + ui.item.value + " ===> " + ui.item.id); } }); }) @using (Html.BeginForm()) { @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) } HomeController.cs using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace WebApplication2.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult About() { ViewBag.Message = "Your application description page."; return View(); } public ActionResult Contact() { ViewBag.Message = "Your contact page."; return View(); } [HttpPost] public JsonResult Index(string Prefix) { //Note : you can bind same list from database List ObjList = new List () { new City {Id=1,Name="Latur" }, new City {Id=2,Name="Mumbai" }, new City {Id=3,Name="Pune" }, new City {Id=4,Name="Delhi" }, new City {Id=5,Name="Dehradun" }, new City {Id=6,Name="Noida" }, new City {Id=7,Name="New Delhi" } }; //Searching records from list using LINQ query var Name = (from N in ObjList where N.Name.StartsWith(Prefix) select new { N.Name, N.Id }); return Json(Name, JsonRequestBehavior.AllowGet); } } public class City { public int Id { get; set; } public string Name { get; set; } } } For more details: Autocomplete https://jqueryui.com/autocomplete/#remote-jsonp How to Map data in jquery-ui autocomplete is not working https://stackoverflow.com/questions/13063527/how-to-map-data-in-jquery-ui-autocomplete-is-not-working AutoComplete Textbox in MVC Using jQuery and WebAPI https://www.c-sharpcorner.com/UploadFile/raj1979/autocomplete-textbox-in-mvc-using-jquery-and-webapi/ Hope this will help you!

Jignesh Kumar · Answer

Hello Gopi, Please use this one, https://www.c-sharpcorner.com/UploadFile/0c1bb2/creating-autocomplete-textbox-in-Asp-Net-mvc-5/ https://stackoverflow.com/questions/4815330/jquery-ui-autocomplete-with-item-and-id

Selecting the Key value of the selected item in AutoComplete Text box.

Answers (2)