Autocompletion Textbox in ASP.NET MVC Using jQuery

Now days you can see on many sites with autocomplete textbox which will help user to select correct option.
This article will show you how to create autocomplete text box in ASP.NET MVC using jQuery.

step 1: Include JQuery reference.
we are using three jquery files, 2 js and 1 css

<link href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
</script><script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

Step 2: Add textbox on View

<div>Product: @Html.TextBox("dealerName")</div>

Step 3: Create Controller that will return the list of autocomplete values in the JSON format.

public JsonResult getData(string term)
        {
            // We can get a list of MicrosoftProduct from the database, but
            // for this example, I will populate a list with values.
            List<string> MicrosoftProduct = new List<string>();
            MicrosoftProduct.Add("Office");
            MicrosoftProduct.Add(".NET");
            MicrosoftProduct.Add("VS");
            MicrosoftProduct.Add("sql server");
            MicrosoftProduct.Add("Windows7");
            MicrosoftProduct.Add("Window8");

            // Select the tags that match the query, and get the
            // number or tags specified by the limit.

            List<string> getValues = MicrosoftProduct.Where(item => item.ToLower().StartsWith(term.ToLower())).ToList();

            // Return the result set as JSON
            return Json(getValues, JsonRequestBehavior.AllowGet);
        }

Step 4: Add the jQuery Autocomplete script
Finally, we have to add the jQuery Autocomplete initialization script in the view to wire up the plug-in to the text box. Notice in line we are using getJSON in above script AutoComplete is controller and getData is a controller method which returns the list of autocomplete values in the JSON format.

<script type="text/javascript">

    $(function () {
        $('#productName').autocomplete({
            source: function (request, response) {
                $.getJSON("/AutoComplete/getData?term=" + request.term, function (data) {
                    response(data);
                });
            },
            minLength: 3,
            delay: 100
        });
    });

</script>

Now we have an AJAX enabled autocomplete box using jQuery in ASP.NET MVC.

Autocompletion

Autocompletion

Complete code

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $('#productName').autocomplete({
                source: function (request, response) {
                    $.getJSON("/AutoComplete/getData?term=" + request.term, function (data) {
                        response(data);
                    });
                },
                minLength: 3,
                delay: 100
            });
        });
    </script>
</head>
<body>
    <div class="page">
        <div id="header" style="height: 80px;">
            <div id="title">
                <h1>
                    Autocomplete Textbox
                </h1>
            </div>
        </div>
        <div id="main">
            <div style="padding: 20px;">
                Type any one of this: Office, .NET, Visual Studio, sql server, Windows7, Windows8
            </div>
            <div style="padding: 20px;">
                Product: @Html.TextBox("productName")</div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AutoComplete.Controllers
{
    public class AutoCompleteController : Controller
    {
        //
        // GET: /AutoComplete/

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

        public JsonResult getData(string term)
        {
            // We can get a list of MicrosoftProduct from the database, but 
            // for this example, I will populate a list with values.
            List<string> MicrosoftProduct = new List<string>();
            MicrosoftProduct.Add("Office");
            MicrosoftProduct.Add(".NET");
            MicrosoftProduct.Add("Visual Studio");
            MicrosoftProduct.Add("sql server");
            MicrosoftProduct.Add("Windows7");
            MicrosoftProduct.Add("Window8");

            // Select the tags that match the query, and get the 
            // number or tags specified by the limit.

            List<string> getValues = MicrosoftProduct.Where(item => item.ToLower().StartsWith(term.ToLower())).ToList();

            // Return the result set as JSON
            return Json(getValues, JsonRequestBehavior.AllowGet);
        }
    }
}

Download complete code

Autocompletion Textbox in ASP.NET MVC Using jQuery

Autocompletion Textbox in ASP.NET MVC Using jQuery

Advertisements
This entry was posted in jQuery, MVC and tagged , . Bookmark the permalink.

One Response to Autocompletion Textbox in ASP.NET MVC Using jQuery

  1. divyesh says:

    thanks for helping it works perfectly…..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s