ASP.Net MVC 4 + jQuery Autocomplete Dropdownlist

In this tutorial, We will show you how to make your existing dropdownlist to a automcomplete dropdownlist.

Tools used
1. Microsoft VS 2012
2. jQuery
3. jQuery-UI
4. jQuery-ui.css

Step to integrate – ASP.Net MVC 4 + jQuery Autocomplete Dropdownlist

First of all, we will assume you know how to create a new MVC project in MS 2012, in case you need guide, Please create a project and name it AutoCompleteDropDownList.
After create the project, By default, jquery and jQuery-UI javascript files has been created in Scripts folder and you will see files like image below, We will need these files in later step.
.
Download jQuery-ui.css and save into contentthemebase folder.
4.Download jQuery and jQuery-UI and save into Scripts folder.
Go to App_start>BundleConfig.cs, and modify your code to include the downloaded jquery-ui.css

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.css",
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));

By adding new line into bundle meaning that all view will download the file even thought the page does not require the file, We assume that all of the view need this file, so that is why we include the file in bundleConfig.cs

It’s recommended that we bind data with strongly type model, so that we could spot the error in design time. So we create a View Model folder and in this folder add a class name Programming.cs and this class will going to help us to bind data into view. Copy this code into Programming.cs.

Programming.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AutoCompleteDropDownList.ViewModel
{
    public class Programming
    {
        public int selectedId { get; set; }
        public System.Web.Mvc.SelectList languanges;
    }
}

Create a controller named AutoCompleteDropDown. (Right click on Controllers Folder > Add > Controller). Now we need to prepare dropdownlist data , go to Controller> AutoCompleteDropDown then add this code into Index function

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
public class AutoCompleteDropDownController : Controller
    {
        //
        // GET: /AutoCompleteDropDown/
        public ActionResult Index(ViewModel.Programming programming)
        {
            List<SelectListItem> list = new List<SelectListItem>() {
                new SelectListItem(){ Value="1", Text="ActionScript"},
                new SelectListItem(){ Value="2", Text="AppleScript"},
                new SelectListItem(){ Value="3", Text="Asp"},
                new SelectListItem(){ Value="4", Text="BASIC"},
                new SelectListItem(){ Value="5", Text="C"},
                new SelectListItem(){ Value="6", Text="C++"},
                new SelectListItem(){ Value="7", Text="Clojure"},
                new SelectListItem(){ Value="8", Text="COBOL"},
                new SelectListItem(){ Value="9", Text="ColdFusion"},
                new SelectListItem(){ Value="10", Text="Erlang"},
                new SelectListItem(){ Value="11", Text="Fortran"},
                new SelectListItem(){ Value="12", Text="Groovy"},
                new SelectListItem(){ Value="13", Text="Haskell"}, 
                new SelectListItem(){ Value="14", Text="instinctcoder.com"},
                new SelectListItem(){ Value="15", Text="Java"},
                new SelectListItem(){ Value="16", Text="JavaScript"},
                new SelectListItem(){ Value="17", Text="Lisp"},
                new SelectListItem(){ Value="18", Text="Perl"},
                new SelectListItem(){ Value="19", Text="PHP"},
                new SelectListItem(){ Value="20", Text="Python"},
                new SelectListItem(){ Value="21", Text="Ruby"},
                new SelectListItem(){ Value="22", Text="Scala"},
                new SelectListItem(){ Value="23", Text="Scheme"},
            };
            programming = new ViewModel.Programming();
            programming.languanges = new SelectList(list, "Value", "Text");
            return View(programming);
        }

In the AutoCompleteDropDown.cs, add view with name index. (Right click on ActionResult > Add View). Then go to Views > AutoCompleteDropDown > Index.chtml. Copy code below and paste into Index.chtml

Index.chtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
@model AutoCompleteDropDownList.ViewModel.Programming  
  
<style>
    .custom-combobox {
        position: relative;
        display: inline-block;
    }
    .custom-combobox-toggle {
        position: absolute;
        top: 0;
        bottom: 0;
        margin-left: -1px;
        padding: 0;
        /* support: IE7 */
        *height: 1.7em;
        *top: 0.1em;
    }
    .custom-combobox-input {
        margin: 0;
        padding: 0.3em;
    }
     
</style>
<script>
    (function ($) {
        $.widget("custom.combobox", {
            _create: function () {
                this.wrapper = $("<span>")
                  .addClass("custom-combobox")
                  .insertAfter(this.element);
                this.element.hide();
                this._createAutocomplete();
                this._createShowAllButton();
            },
            _createAutocomplete: function () {
                var selected = this.element.children(":selected"),
                  value = selected.val() ? selected.text() : "";
                this.input = $("<input>")
                  .appendTo(this.wrapper)
                  .val(value)
                  .attr("title", "")
                  .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                  .autocomplete({
                      delay: 0,
                      minLength: 0,
                      source: $.proxy(this, "_source")
                  })
                  .tooltip({
                      tooltipClass: "ui-state-highlight"
                  });
                this._on(this.input, {
                    autocompleteselect: function (event, ui) {
                        ui.item.option.selected = true;
                        this._trigger("select", event, {
                            item: ui.item.option
                        });
                    },
                    autocompletechange: "_removeIfInvalid"
                });
            },
            _createShowAllButton: function () {
                var input = this.input,
                  wasOpen = false;
                $("<a>")
                  .attr("tabIndex", -1) 
                  .tooltip()
     
                  .appendTo(this.wrapper)
                  .button({
                      icons: {
                          primary: "ui-icon-triangle-1-s"
                      },
                      text: false
                  })
                  .removeClass("ui-corner-all")
                  .addClass("custom-combobox-toggle ui-corner-right")
                  .mousedown(function () {
                      wasOpen = input.autocomplete("widget").is(":visible");
                  })
                  .click(function () {
                      input.focus();
                      // Close if already visible
                      if (wasOpen) {
                          return;
                      }
                      // Pass empty string as value to search for, displaying all results
                      input.autocomplete("search", "");
                  });
            },
            _source: function (request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                response(this.element.children("option").map(function () {
                    var text = $(this).text();
                    if (this.value && (!request.term || matcher.test(text)))
                        return {
                            label: text,
                            value: text,
                            option: this
                        };
                }));
            },
            _removeIfInvalid: function (event, ui) {
                // Selected an item, nothing to do
                if (ui.item) {
                    return;
                }
                // Search for a match (case-insensitive)
                var value = this.input.val(),
                  valueLowerCase = value.toLowerCase(),
                  valid = false;
                this.element.children("option").each(function () {
                    if ($(this).text().toLowerCase() === valueLowerCase) {
                        this.selected = valid = true;
                        return false;
                    }
                });
                // Found a match, nothing to do
                if (valid) {
                    return;
                }
                // Remove invalid value
                this.input
                  .val("") 
                this.element.val("");
                this._delay(function () {
                    this.input.tooltip("close").attr("title", "");
                }, 2500);
                this.input.data("ui-autocomplete").term = "";
            },
            _destroy: function () {
                this.wrapper.remove();
                this.element.show();
            }
        });
    })(jQuery);
    $(function () {
        $("#combobox").combobox();
        $("#toggle").click(function () {
            $("#combobox").toggle();
        });
    });
</script>
<button id="toggle">Show underlying select</button>
@Html.DropDownListFor(m => m.selectedId, Model.languanges, new  { id="combobox"})

At last, Modify the _Layout.chtml, to include the css and jquery. Go to Shared > _Layout.chtml. and code in this file is look like this

_Layout.chtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/themes/base/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title">@Html.ActionLink("your logo here", "Index", "Home")</p>
                </div>
                <div class="float-right">
                    <section id="login">
                        @Html.Partial("_LoginPartial")
                    </section>
                    <nav>
                        <ul id="menu">
                            <li>@Html.ActionLink("Home", "Index", "Home")</li>
                            <li>@Html.ActionLink("About", "About", "Home")</li>
                            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        <div id="body">
            @RenderSection("featured", required: false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    © @DateTime.Now.Year - My ASP.NET MVC Application
                </div>
            </div>
        </footer>
        @RenderSection("scripts", required: false)
    </body>
</html>

You need to make sure the jQuery javascript is place on top of jQuery-UI javascript file or else Autocomplete will not work.

Run the application (F5). That’s all!

The jQuery in Index.chtml it’s will help us to hide the original dropdownlist and create another fake “dropdownlist” and make it look like the original dropdownlist. In fact the actual dropdownlist is still the one which responsible to bind data from/to controller.

Comments