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

MD Rabbi

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.

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted 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">





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 Singh5y ago
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 Rabbi5y ago
Sachin Singh Thanks I will do that successfully.
MD Rabbi5y ago
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">





AutoComplete in ASP.NET Core MVC



        "text" id="FName" placeholder="Input your keyword" />
That is my output

but I need as like that
Sachin Singh5y ago
please share your code that is not working and we will try to short out
MD Rabbi5y ago
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 Mohanty5y ago
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

AutoComplete in ASP.NET Core MVC

Sachin Singh Thanks I will do that successfully.

AutoComplete in ASP.NET Core MVC