Asp.net-HTML combobox using JQuery UI.

By using JQuery-UI plugin we can easily convert asp.net dropdown or html select control to combobox.
In this example we will convert the asp.net dropdown (html select) as combobox which will allow the users to type and select the value from the list (similar to autocomplete extender) and clear the input if the entered value is not there in the list.

Example

Implementation:

Add controls add give css class name as "combo"

<asp:DropDownList ID="ddlCountries" runat="server" CssClass="combo"> </asp:DropDownList> <select id="selCountries" class="combo"> <option value=""></option> <option value="India">India</option> <option value="USA">USA</option> <option value="China">China</option> <option value="New Zealand">New Zealand</option> <option value="England">England</option> </select>

Add reference to jquery-ui.css, jquery-1.10.2.js, jquery-ui.js in between head tag

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Add the below style(css) between head tag

<style> .custom-combobox { position: relative; display: inline-block; height:35px; } .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; background:#fff; outline:none; } </style>

Add the below JavaScript between head tag

<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) .attr("title", "Show All Items") .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("") .attr("title", value + " didn't match any item") .tooltip("open"); 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); </script>

Finally now call the jquery-ui combobox() function document ready event.

<script language="javascript"> $(document).ready(function () { $(".combo").combobox(); }); </script>

that's all.... run your web page and check the comoboxes.....

you can download the source code form here... Download