autocomplete textbox using jquery ajax with database in asp.net

Updated : Nov 05, 2019 in Articles

Autocomplete textbox in MVC using jquery

In this article, we will learn about how to implement functionality autocomplete textbox in MVC with database jquery ajax with entity framework

autocomplete textbox using jquery ajax with database in asp.net
autocomplete textbox using jquery ajax with a database in asp.net

Implementing steps for Autocomplete textbox

  1. Create a table in the database
  2. Add an Ado.Net Entity Data Model to project
  3. creating a controller and implementing the view
  4. implementing ajax script for Autocomplete textbox

Step 1: Create a table in a database

Go to your database to create a table name like a product by using this product table we will bind the data to Autocomplete textbox

follow the given below SQL snippet code for creating a product table

CREATE TABLE [dbo].[Products](
	[ProductID] [int] IDENTITY(1,1) NOT NULL,
	[ProductName] [nvarchar](40) NOT NULL,
	[SupplierID] [int] NULL,
	[CategoryID] [int] NULL,
	[QuantityPerUnit] [nvarchar](20) NULL,
	[UnitPrice] [money] NULL,
	[UnitsInStock] [smallint] NULL,
	[UnitsOnOrder] [smallint] NULL,
	[ReorderLevel] [smallint] NULL,
	[Discontinued] [bit] NOT NULL,
	)

you will Insert some dummy data in your product table

Step 2: Add an Ado.Net Entity Data Model to project

right-click on model folder add Add an Ado.Net Entity Data Model

Add an Ado.Net Entity Data Model
Add an Ado.Net Entity Data Model

Step 3: implementing a controller and view for Autocomplete textbox

Right-click on your controller folder add Controller name as Home controller and create an index action methods for [HttpGet] and [HttpPost]

By default in Asp.net MVC, All controller action methods action verbs type is [HttpGet] only if you are not mentioned by default [HttpGet]

In this example, By default [HttpGet] Action index method it will return the only view like Autocomplete textbox and Button

[HttpPost] index Action method it will return based on your searching keyword data form the database

Create a getcompanies() Action method this method will return the data based on product id from product table in the format type is JSON, this method we will call through ajax script

Add given below snippet code in you Home controller

public class HomeController : Controller
    {
        TestDBEntities db = new TestDBEntities();
        [HttpGet]
        public ActionResult Index()
        {

            return View();
        }

        [HttpPost]
        public ActionResult Index(string tags)
        {
            Product c = db.Products.Where(x => x.ProductName.Equals(tags)).SingleOrDefault();
            return View(c);
        }
        public JsonResult getcompanies()
        {
            List<Product> li = db.Products.OrderBy(x => x.ProductID).ToList();

            return Json(li, JsonRequestBehavior.AllowGet);
        }
    }

Step 4: Ajax Script for calling getcompanies() action method

<script>
    $(function () {
        var availableTags = [];
        $.ajax(
            {
                type: 'GET',
                url: '../Home/getcompanies',
                success: function (response) {
                    $.each(response, function (key, item) {
                        availableTags.push(item.ProductName);
                    });
                }
            });
        $("#tags").autocomplete({
            source: availableTags
        });
    });
</script>

Step 5: view implementing

@model autocomp.Models.Product
@{
    ViewBag.Title = "Home Page";
    Layout = null;
}
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<br /><br /><br />
<style>
    .form-control {
        width: unset !important;
    }
</style>
<div class="container">
    <div class="ui-widget ">
        <p>Available products:</p>
        <label for="tags">Tags: </label>

        @using (Html.BeginForm())
        {
            <div class="col-md-12 autocomplete">
                <input class="form-control autocomplete col-md-4" id="tags" name="tags" type="text">
                <input class="form-control col-md-1" type="submit" value="search" />
            </div>
        }
    </div>
    <br />
    @if (Model != null)
    {
        <h1>@Model.CategoryID</h1>
        <h2>@Model.ProductName</h2>
        <h3>@Model.QuantityPerUnit</h3>
    }
</div>

<script>
    $(function () {
        var availableTags = [];
        $.ajax(
            {
                type: 'GET',
                url: '../Home/getcompanies',
                success: function (response) {
                    $.each(response, function (key, item) {
                        availableTags.push(item.ProductName);
                    });
                }
            });
        $("#tags").autocomplete({
            source: availableTags
        });
    });
</script>

Note: If you are trying to change the controller name, view names you should be changed at ajax URL, and view level also

In this article, we learned about step by step how to implement the Autocomplete textbox in MVC with database jquery ajax the same topic we will implant using Ado.net in the Next Article

Like
Like Love Haha Wow Sad Angry

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x