Implement Bootstrap AutoComplete TextBoxusing jQuery TypeAhead plugin in ASP.Net Core MVC

Last Reply one month ago By dharmendr

Posted one month ago

I have implemented this example in asp.net core but no result coming when typing.

Bootstrap AutoComplete TextBox example using jQuery TypeAhead plugin in ASP.Net MVC Razor

No error coming. How to resolve it.

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

Hi rani,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

Model

public class Customer
{
    public string CustomerID { get; set; }
    public string ContactName { get; set; }
}

Controller

public class HomeController : Controller
{
    private DBCtx Context { get; }
    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }

    public IActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Index(string CustomerName, string CustomerId)
    {
        ViewBag.Message = "Name : " + CustomerName + "\\nId : " + CustomerId;

        return View();
    }

    public JsonResult AutoComplete([FromBody]Param prefix)
    {
        var customers = (from customer in this.Context.Customers
                            select new
                            {
                                label = customer.ContactName,
                                val = customer.CustomerID
                            }).ToList();
        return Json(customers);
    }

    public class Param
    {
        public string prefix { get; set; }
    }
}

View

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=txtCustomer]").typeahead({
                hint: true,
                highlight: true,
                minLength: 1,
                source: function (request, response) {
                    $.ajax({
                        url: '/Home/AutoComplete/',
                        data: "{ 'prefix': '" + request + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            items = [];
                            map = {};
                            $.each(data, function (i, item) {
                                var id = item.val;
                                var name = item.label;
                                map[name] = { id: id, name: name };
                                items.push(name);
                            });
                            response(items);
                            $(".dropdown-menu").css("height", "auto");
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                updater: function (item) {
                    $('[id*=hfCustomer]').val(map[item].id);
                    return item;
                }
            });
        });
    </script>
</head>
<body>
    <form method="post" asp-action="Index" asp-controller="Home">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <input type="text" id="txtCustomer" name="CustomerName" class="form-control"
                           autocomplete="off" style="width:200px" /><br />
                    <input type="submit" value="Submit" class="btn btn-primary" />
                    <input type="hidden" id="hfCustomer" name="CustomerId" />
                </div>
            </div>
        </div>
    </form>
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            window.onload = function () {
                alert("@ViewBag.Message");
            };
        </script>
    }
</body>
</html>

Screenshot