hello friends,
https://www.youtube.com/watch?v=C8oykuBC0HA&t=2s
Today i gonna show you some great utility controls and API which make your web site a delight experience for visitors n users.
(1)When you a have very long list of items to display in a dropdown list in that case these below great control serves awesome utility of auto-suggestion and filtering of item on the basis of text or alphabet typed by user.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet"
href="/resources/demos/style.css"
/>
<style type="text/css">
.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.2em;
*top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.1em;
width: auto;
overflow:scroll;
font-family:Arial;
font-size:14;
}
</style>
<script type="text/javascript">
(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);
$(function () {
$("#ddlanguages").combobox();
});
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlanguages"
ClientIDMode="Static"
runat="server">
<asp:ListItem Text=""></asp:ListItem>
<asp:ListItem Text="ActionScript"></asp:ListItem>
<asp:ListItem Text="AppleScript"></asp:ListItem>
<asp:ListItem Text="Asp"></asp:ListItem>
<asp:ListItem Text="BASIC"></asp:ListItem>
<asp:ListItem Text="C"></asp:ListItem>
<asp:ListItem Text="C++"></asp:ListItem>
<asp:ListItem Text="Clojure"></asp:ListItem>
<asp:ListItem Text="COBOL"></asp:ListItem>
<asp:ListItem Text="ColdFusion"></asp:ListItem>
<asp:ListItem Text="Erlang"></asp:ListItem>
<asp:ListItem Text="Fortran"></asp:ListItem>
<asp:ListItem Text="Groovy"></asp:ListItem>
<asp:ListItem Text="Haskell"></asp:ListItem>
<asp:ListItem Text="Java"></asp:ListItem>
<asp:ListItem Text="JavaScript"></asp:ListItem>
<asp:ListItem Text="Lisp"></asp:ListItem>
<asp:ListItem Text="Perl"></asp:ListItem>
<asp:ListItem Text="PHP"></asp:ListItem>
<asp:ListItem Text="Python"></asp:ListItem>
<asp:ListItem Text="Ruby"></asp:ListItem>
<asp:ListItem Text="Scala"></asp:ListItem>
<asp:ListItem Text="Scheme"></asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
