How to create asp dot net core auto-complete textbox in asp dot net

Question

How to create asp dot net core auto-complete textbox in asp dot net I found some video on the internet but when show auto-complete suggestion after I need to click that suggestion and go to details that post or other think.

Sachin Singh · Answer

you can use jquery autocomplete , its simple to use view "viewport" content= "width=device-width" /> Index "stylesheet" href= "http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" > "https://code.jquery.com/jquery-1.12.4.js" > "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > $(document).ready(function () { $( '#productName' ).autocomplete({ source: '/YourControllerName/search' }); }); AutoComplete in ASP.NET Core MVC "text" id= "productName" placeholder= "Input your keyword" /> Controller 's Action [Produces( "application/json" )] [HttpGet( "search" )] public async Task Search() { try { string term = HttpContext.Request.Query[ "term" ].ToString(); var names = db.Products.Where(p => p.Name.Contains(term)).Select(p => p.Name).ToList(); return Ok(names); } catch { return BadRequest(); } }

Sachin Singh · Answer

okk , got your issue change it like below controller [HttpPost] public JsonResult AutoComplete( string prefix) { List sts= new List (){ new Student(){Id=1,Name= "sachin" }, new Student(){Id=2,Name= "Arjun" }, new Student(){Id=3,Name= "Vikash" }, }; var customers = (from s in sts where s.Name.StartsWith(prefix) select new { label = s.Name, val = s.Id }).ToList(); return Json(customers); } view "viewport" content= "width=device-width" /> Index "stylesheet" href= "http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" > "https://code.jquery.com/jquery-1.12.4.js" > "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > "text/css" > body { font-family: Arial; font-size: 10pt; } .ui-autocomplete { overflow: auto; max-height: 100px; } "text/javascript" > $(function () { $( "#txtStudent" ).autocomplete({ source: function (request, response) { $.ajax({ url: '/Home/AutoComplete/' , data: "{ 'prefix': '" + request.term + "'}" , dataType: "json" , type: "POST" , contentType: "application/json; charset=utf-8" , success: function (data) { response($.map(data, function (item) { return item; })) }, error: function (response) { alert(response.responseText); }, failure: function (response) { alert(response.responseText); } }); }, select: function (e, i) { $( "#hfStudent" ).val(i.item.val); }, minLength: 0 }).focus(function () { $( this ).autocomplete( "search" ); }); }); "text" id= "txtStudent" name= "CustomerName" /> "hidden" id= "hfStudent" name= "name" value= "" /> just copy paste it will give below results

MD Rabbi · Answer

Sachin Singh Thanks I will do that successfully.

MD Rabbi · Answer

Dear Sachin Singh I just copy your codes I have a controller SearchController using ASPApp.Models; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace ASPApp.Controllers { public class SearchController : Controller { //-----Data connection----- private StudentContext studentContextConnection; public SearchController(StudentContext Db) { studentContextConnection = Db; } //-----Data connection----- [Produces( "application/json" )] public async Task Index() { try { string term = HttpContext.Request.Query[ "term" ].ToString(); var names = studentContextConnection.tbl_Student.Where(p => p.FName.Contains(term)).Select(p => p.FName).ToList(); return Ok(names); } catch { return BadRequest(); } } } } My View Page Index ID FName and i have a view page Index "viewport" content= "width=device-width" /> Index "stylesheet" href= "http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" > "https://code.jquery.com/jquery-1.12.4.js" > "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > $(document).ready( function () { $( '#FName' ).autocomplete({ source: '/Search/Index' }); }); AutoComplete in ASP.NET Core MVC "text" id= "FName" placeholder= "Input your keyword" /> That is my output but I need as like that

Sachin Singh · Answer

please share your code that is not working and we will try to short out

MD Rabbi · Answer

Dear @Sachin Singh Thank for reply, but when i am using this controller and going to view show my database table data not not open view page and textbox

Kiran Mohanty · Answer

You can use AutoCompleteExtender control in ASP.Net . Here is a link for you. https://stackoverflow.com/questions/3854358/how-to-make-an-autocomplete-textbox-in-asp-net

How to create asp dot net core auto-complete textbox in asp dot net

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (7)