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.
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 Source Code
Reference:-Examples With Code
No comments:
Post a Comment