Jquery UI Autosugget dropdown in ASP.NET
Very recently, I came across a requirement where I have a conventional ASP.NET site which has a dropdown, I have to make
1. Enabling filtering on the dropdown by its bound text.
2. Provide another search field which will enable search by the Id and the same will get selected in the auto suggest dropdown.
Problem : The default jquery ui events in the demos of their official site will not have this functionality, since its an existing dropdown which is used in numerous places in the code behind, its not really advisable to change the code behind.
Solution : We know for sure that the dropdown is bound to values in the code behind, all we have to do is to enable filtering by its text, which is pretty straight forward with the jquery ui in play.
Now coming to 2nd part, here we have to bind the source of the search field by the values of the dropdown that is already bound in the code behind. Then we have to enable search by id not by the text and select the appropriate dropdown item on select of the search field.
The following code snippet just does that.
First bind the dropdown in the code behind, (please note that this already existed)
//bind dropdown
ddLangs.Items.Clear();
ddLangs.Items.Add(new ListItem("select", "0"));
ddLangs.Items.Add(new ListItem("vb.net", "1"));
ddLangs.Items.Add(new ListItem("c#", "2"));
ddLangs.Items.Add(new ListItem("java", "3"));
ddLangs.Items.Add(new ListItem("pascal", "4"));
Secondly Add the Search elements to the form and enclose the existing dropdown in a div and style class
<p>
Search lang Id:<input type="text" id="autoLangs" style="width:500px;" /><input type="hidden" id="autoLangId" />
<span id="autoResult"></span>
</p>
Languages : <div class="ui-widget"><asp:DropDownList ID="ddLangs" runat="server"></asp:DropDownList></div>
Thirdly add the javscript starting with the reference to the UI and Jquery libraries needed to refer and then the custom style and coding, I have highlighted the calls that initiates the combobox feature and the search by ID feature.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<style>
.ui-autocomplete {
/* these sets the height and width */
max-height:200px;
max-width: 500px;
/* these make it scroll for anything outside */
overflow-x:auto;
overflow-y:auto;
}
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
}
.custom-combobox-input {
margin: 0;
padding: 5px 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
(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")
.css("width", "500px")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on(this.input, {
autocompleteselect: function (event, ui) {
//alert('select fired');
//search ruleId text box value set as dropRules
$("#autoLangs").val('');
$("#autoLangId").val('0');
$("#autoResult").text('');
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) {
try {
// 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.autocomplete("instance").term = "";
}
catch (e) {
}
},
autocomplete: function (searchVal, searchTxt) {
this.element.val(searchVal);
this.input.val(searchTxt);
// 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;
}
},
_destroy: function () {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);
$(function () {
$('#<%= ddLangs.ClientID %>').combobox();
bindAutoSuggest();
});
});
//bind auto suggest search
function bindAutoSuggest() {
var rules = [];
var rule = { value: "", label: "", desc: "" };
$('#<%= ddLangs.ClientID %>' + ' option').each(function () {
var rule = { value: $(this).val(), label: $(this).val() + '-' + $(this).text(), desc: $(this).text() }
rules.push(rule);
});
$("#autoLangs").autocomplete({
minLength: 0,
source: rules,
focus: function (event, ui) {
$("#autoLangs").val(ui.item.label);
return false;
},
select: function (event, ui) {
$("#autoLangs").val(ui.item.label);
$("#autoLangId").val(ui.item.value);
$("#autoResult").text('You selected ruleId : ' + $("#autoLangId").val());
var selectedRuleId = $("#autoLangId").val();
var selectedText = ui.item.desc;
$('#<%= ddLangs.ClientID %>').combobox('autocomplete', selectedRuleId, selectedText);
return false;
}
});
}
</script>
