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

Download Code

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

1. 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.
2. 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.
   .
3. Download jQuery-ui.css and save into contentthemebase folder.
   4.Download jQuery and jQuery-UI and save into Scripts folder.
4. 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

1. 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;     } }

1. 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);         }

1. 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"})

1. 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.

1. 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.