Make
your dropdowns searchable:
I know
many of you have a requirement to make drop down searchable may be in ASP.net,
MVC or any other web base technology.
One of
my friends had client requirement to make all of his drop downs in asp.net
application as searchable.
Purchasing
third party controls for the single feature could be very expensive, the second
things is even we had stuff to make drop down as searchable, it will not be
feasible to go to each control and implement logic in each place.
By the
way I had to have something which should resolve the requirement without any
above obstacle.
So I found something exactly matches the requirement,
you may wonder how much long procedure it could be, but for your information it’s
very easier & the beauty is we need to just do modifications at parent page.
The
solution is to include the scripts I adjusted, that’s it, as soon as you
include and do refresh, all of your drop downs will become searchable and
readable.
Step 1:
Copy
& Paste below code in JS file and include in your Parent or Master Page.
/*custom changes done by - ilyas to facilitate easy
integration */
(function ($) { var B = register("searchable"); B.defaults = { maxListSize: 100, maxMultiMatch: 50, exactMatch: false, wildcards: true, ignoreCase: true, warnMultiMatch: "top {0} matches ...", warnNoMatch: "no matches ...", latency: 200, zIndex: "auto" }; B.execute = function (g, h) { var j = null; var k = null; var l = null; if ($.browser.msie && parseInt(jQuery.browser.version) < 7) return this; if (this.nodeName != "SELECT" || this.size > 1) return this; var m = $(this); var n = { index: -1, options: null }; var o = "lang"; var p = false; $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); if ($.browser.chrome) $.browser.safari = false; if ($.meta) { g = $.extend({}, options, m.data()) } var q = $("<div/>"); var r = $("<div/>"); var t = $("<input/>"); var u = $("<select/>"); var x = $("<option>" + g.warnMultiMatch.replace(/\{0\}/g, g.maxMultiMatch) + "</option>").attr("disabled", "true"); var y = $("<option>" + g.warnNoMatch + "</option>").attr("disabled", "true"); var z = { option: function (a) { return $(u.get(0).options[a]) }, selected: function () { return u.find(":selected") }, selectedIndex: function (a) { if (a > -1) u.get(0).selectedIndex = a; return u.get(0).selectedIndex }, size: function (a) { u.attr("size", Math.max(2, Math.min(a, 20))) }, reset: function () { if ((m.get(0).selectedIndex - 1) == m.data("index")) return; var a = m.get(0).selectedIndex; var b = m.get(0).length; var c = Math.floor(g.maxMultiMatch / 2); var d = Math.max(1, (a - c)); var e = Math.min(b, Math.max(g.maxMultiMatch, (a + c))); var f = a - d; u.empty(); this.size(e - d); for (var i = d; i < e; i++) u.append($(m.get(0).options[i]).clone().attr(o, i - 1)); if (e > g.maxMultiMatch) u.append(x); u.get(0).selectedIndex = f } }; draw(); var A = false; r.mouseover(function () { A = true }); r.mouseout(function () { A = false }); u.mouseover(function () { A = true }); u.mouseout(function () { A = false }); t.click(function (e) { if (!p) enable(e, true); else disable(e, true) }); t.blur(function (e) { if (!A && p) disable(e, true) }); m.keydown(function (e) { if (e.keyCode != 9 && !e.shiftKey && !e.ctrlKey && !e.altKey) t.click() }); m.click(function (e) { u.focus() }); u.click(function (e) { if (z.selectedIndex() < 0) return; disable(e) }); u.focus(function (e) { t.focus() }); u.blur(function (e) { if (!A) disable(e, true) }); u.mousemove(function (e) { if ($.browser.opera && parseFloat(jQuery.browser.version) >= 9.8) return true; var a = Math.floor(parseFloat(/([0-9\.]+)px/.exec(z.option(0).css("font-size")))); var b = 4; if ($.browser.opera) b = 2.5; if ($.browser.safari || $.browser.chrome) b = 3; a += Math.round(a / b); z.selectedIndex(Math.floor((e.pageY - u.offset().top + this.scrollTop) / a)) }); r.click(function (e) { t.click() }); t.keyup(function (e) { if (jQuery.inArray(e.keyCode, new Array(9, 13, 16, 33, 34, 35, 36, 38, 40)) > -1) return true; l = $.trim(t.val().toLowerCase()); clearSearchTimer(); j = setTimeout(searching, g.latency) }); t.keydown(function (e) { if (e.keyCode == 9) { disable(e) } if (e.shiftKey || e.ctrlKey || e.altKey) return; switch (e.keyCode) { case 13: disable(e); m.focus(); break; case 27: disable(e, true); m.focus(); break; case 33: if (z.selectedIndex() - u.attr("size") > 0) { z.selectedIndex(z.selectedIndex() - u.attr("size")) } else { z.selectedIndex(0) } synchronize(); break; case 34: if (z.selectedIndex() + u.attr("size") < u.get(0).options.length - 1) { z.selectedIndex(z.selectedIndex() + u.attr("size")) } else { z.selectedIndex(u.get(0).options.length - 1) } synchronize(); break; case 38: if (z.selectedIndex() > 0) { z.selectedIndex(z.selectedIndex() - 1); synchronize() } break; case 40: if (z.selectedIndex() < u.get(0).options.length - 1) { z.selectedIndex(z.selectedIndex() + 1); synchronize() } break; default: return true } return false }); function draw() { m.css("text-decoration", "none"); m.width(m.outerWidth()); m.height(m.outerHeight()); q.css("position", "relative"); q.css("width", m.outerWidth()); if ($.browser.msie) q.css("z-index", h); r.css({ "position": "absolute", "top": 0, "left": 0, "width": m.outerWidth(), "height": m.outerHeight(), "background-color": "#FFFFFF", "opacity": "0.01" }); t.attr("type", "text"); t.hide(); t.height(m.outerHeight()); t.css({ "position": "absolute", "top": 0, "left": 0, "margin": "0px", "padding": "0px", "outline-style": "none", "border-style": "solid", "border-bottom-style": "none", "border-color": "transparent", "background-color": "transparent" }); var a = new Array(); a.push("border-left-width"); a.push("border-top-width"); a.push("font-size"); a.push("font-stretch"); a.push("font-variant"); a.push("font-weight"); a.push("color"); a.push("text-align"); a.push("text-indent"); a.push("text-shadow"); a.push("text-transform"); a.push("padding-left"); a.push("padding-top"); for (var i = 0; i < a.length; i++) t.css(a[i], m.css(a[i])); if ($.browser.msie && parseInt(jQuery.browser.version) < 8) { t.css("padding", "0px"); t.css("padding-left", "3px"); t.css("border-left-width", "2px"); t.css("border-top-width", "3px") } else if ($.browser.chrome) { t.height(m.innerHeight()); t.css("text-transform", "none"); t.css("padding-left", parseFloatPx(t.css("padding-left")) + 3); t.css("padding-top", 2) } else if ($.browser.safari) { t.height(m.innerHeight()); t.css("padding-top", 2); t.css("padding-left", 3); t.css("text-transform", "none") } else if ($.browser.opera) { t.height(m.innerHeight()); var b = parseFloatPx(m.css("padding-left")); t.css("padding-left", b == 1 ? b + 1 : b); t.css("padding-top", 0) } else if ($.browser.mozilla) { t.css("padding-top", "0px"); t.css("border-top", "0px"); t.css("padding-left", parseFloatPx(m.css("padding-left")) + 3) } else { t.css("padding-left", parseFloatPx(m.css("padding-left")) + 3); t.css("padding-top", parseFloatPx(m.css("padding-top")) + 1) } var c = parseFloatPx(m.css("padding-left")) + parseFloatPx(m.css("padding-right")) + parseFloatPx(m.css("border-left-width")) + parseFloatPx(m.css("border-left-width")) + 23; t.width(m.outerWidth() - c); var w = m.css("width"); var d = m.outerWidth(); m.css("width", "auto"); d = d > m.outerWidth() ? d : m.outerWidth(); m.css("width", w); u.hide(); z.size(m.get(0).length); u.css({ "position": "absolute", "top": m.outerHeight(), "left": 0, "width": d, "border": "1px solid #333", "font-weight": "normal", "padding": 0, "background-color": m.css("background-color"), "text-transform": m.css("text-transform") }); var e = /^\d+$/.test(m.css("z-index")) ? m.css("z-index") : 1; if (g.zIndex && /^\d+$/.test(g.zIndex)) e = g.zIndex; r.css("z-index", (e).toString(10)); t.css("z-index", (e + 1).toString(10)); u.css("z-index", (e + 2).toString(10)); m.wrap(q); m.after(r); m.after(t); m.after(u) }; function enable(e, s, v) { if (m.attr("disabled")) return false; m.prepend("<option />"); if (typeof v == "undefined") p = !p; z.reset(); synchronize(); store(); if (s) u.show(); t.show(); t.focus(); t.select(); m.get(0).selectedIndex = 0; if (typeof e != "undefined") e.stopPropagation() }; function disable(e, a) { p = false; m.find(":first").remove(); clearSearchTimer(); t.hide(); u.hide(); if (typeof a != "undefined") restore(); populate(); if (typeof e != "undefined") e.stopPropagation() }; function clearSearchTimer() { if (j != null) clearTimeout(j) }; function populate() { if (z.selectedIndex() < 0 || z.selected().get(0).disabled) return; m.get(0).selectedIndex = parseInt(u.find(":selected").attr(o)); m.change(); m.data("index", new Number(m.get(0).selectedIndex)) }; function synchronize() { if (z.selectedIndex() > -1 && !z.selected().get(0).disabled) t.val(u.find(":selected").text()); else t.val(m.find(":selected").text()) }; function store() { n.index = z.selectedIndex(); n.options = new Array(); for (var i = 0; i < u.get(0).options.length; i++) n.options.push(u.get(0).options[i]) }; function restore() { u.empty(); for (var i = 0; i < n.options.length; i++) u.append(n.options[i]); z.selectedIndex(n.index); z.size(n.options.length) }; function escapeRegExp(a) { var b = ["/", ".", "*", "+", "?", "|", "(", ")", "[", "]", "{", "}", "\\", "^", "$"]; var c = new RegExp("(\\" + b.join("|\\") + ")", "g"); return a.replace(c, "\\$1") }; function searching() { if (k == l) { j = null; return } var a = 0; k = l; u.hide(); u.empty(); var b = escapeRegExp(l); if (g.exactMatch) b = "^" + b; if (g.wildcards) { b = b.replace(/\\\*/g, ".*"); b = b.replace(/\\\?/g, ".") } var c = null; if (g.ignoreCase) c = "i"; l = new RegExp(b, c); for (var i = 1; i < m.get(0).length && a < g.maxMultiMatch; i++) { if (l.length == 0 || l.test(m.get(0).options[i].text)) { var d = $(m.get(0).options[i]).clone().attr(o, i - 1); if (m.data("index") == i) d.text(m.data("text")); u.append(d); a++ } } if (a >= 1) { z.selectedIndex(0) } else if (a == 0) { u.append(y) } if (a >= g.maxMultiMatch) { u.append(x) } z.size(a); u.show(); j = null }; function parseFloatPx(a) { try { a = parseFloat(a.replace(/[\s]*px/, "")); if (!isNaN(a)) return a } catch (e) { } return 0 }; return }; function register(d) { var e = $[d] = {}; $.fn[d] = function (b) { b = $.extend(e.defaults, b); var c = this.size(); return this.each(function (a) { e.execute.call(this, b, c - a) }) }; return e } })(jQuery);
Step 2:
(function ($) { var B = register("searchable"); B.defaults = { maxListSize: 100, maxMultiMatch: 50, exactMatch: false, wildcards: true, ignoreCase: true, warnMultiMatch: "top {0} matches ...", warnNoMatch: "no matches ...", latency: 200, zIndex: "auto" }; B.execute = function (g, h) { var j = null; var k = null; var l = null; if ($.browser.msie && parseInt(jQuery.browser.version) < 7) return this; if (this.nodeName != "SELECT" || this.size > 1) return this; var m = $(this); var n = { index: -1, options: null }; var o = "lang"; var p = false; $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); if ($.browser.chrome) $.browser.safari = false; if ($.meta) { g = $.extend({}, options, m.data()) } var q = $("<div/>"); var r = $("<div/>"); var t = $("<input/>"); var u = $("<select/>"); var x = $("<option>" + g.warnMultiMatch.replace(/\{0\}/g, g.maxMultiMatch) + "</option>").attr("disabled", "true"); var y = $("<option>" + g.warnNoMatch + "</option>").attr("disabled", "true"); var z = { option: function (a) { return $(u.get(0).options[a]) }, selected: function () { return u.find(":selected") }, selectedIndex: function (a) { if (a > -1) u.get(0).selectedIndex = a; return u.get(0).selectedIndex }, size: function (a) { u.attr("size", Math.max(2, Math.min(a, 20))) }, reset: function () { if ((m.get(0).selectedIndex - 1) == m.data("index")) return; var a = m.get(0).selectedIndex; var b = m.get(0).length; var c = Math.floor(g.maxMultiMatch / 2); var d = Math.max(1, (a - c)); var e = Math.min(b, Math.max(g.maxMultiMatch, (a + c))); var f = a - d; u.empty(); this.size(e - d); for (var i = d; i < e; i++) u.append($(m.get(0).options[i]).clone().attr(o, i - 1)); if (e > g.maxMultiMatch) u.append(x); u.get(0).selectedIndex = f } }; draw(); var A = false; r.mouseover(function () { A = true }); r.mouseout(function () { A = false }); u.mouseover(function () { A = true }); u.mouseout(function () { A = false }); t.click(function (e) { if (!p) enable(e, true); else disable(e, true) }); t.blur(function (e) { if (!A && p) disable(e, true) }); m.keydown(function (e) { if (e.keyCode != 9 && !e.shiftKey && !e.ctrlKey && !e.altKey) t.click() }); m.click(function (e) { u.focus() }); u.click(function (e) { if (z.selectedIndex() < 0) return; disable(e) }); u.focus(function (e) { t.focus() }); u.blur(function (e) { if (!A) disable(e, true) }); u.mousemove(function (e) { if ($.browser.opera && parseFloat(jQuery.browser.version) >= 9.8) return true; var a = Math.floor(parseFloat(/([0-9\.]+)px/.exec(z.option(0).css("font-size")))); var b = 4; if ($.browser.opera) b = 2.5; if ($.browser.safari || $.browser.chrome) b = 3; a += Math.round(a / b); z.selectedIndex(Math.floor((e.pageY - u.offset().top + this.scrollTop) / a)) }); r.click(function (e) { t.click() }); t.keyup(function (e) { if (jQuery.inArray(e.keyCode, new Array(9, 13, 16, 33, 34, 35, 36, 38, 40)) > -1) return true; l = $.trim(t.val().toLowerCase()); clearSearchTimer(); j = setTimeout(searching, g.latency) }); t.keydown(function (e) { if (e.keyCode == 9) { disable(e) } if (e.shiftKey || e.ctrlKey || e.altKey) return; switch (e.keyCode) { case 13: disable(e); m.focus(); break; case 27: disable(e, true); m.focus(); break; case 33: if (z.selectedIndex() - u.attr("size") > 0) { z.selectedIndex(z.selectedIndex() - u.attr("size")) } else { z.selectedIndex(0) } synchronize(); break; case 34: if (z.selectedIndex() + u.attr("size") < u.get(0).options.length - 1) { z.selectedIndex(z.selectedIndex() + u.attr("size")) } else { z.selectedIndex(u.get(0).options.length - 1) } synchronize(); break; case 38: if (z.selectedIndex() > 0) { z.selectedIndex(z.selectedIndex() - 1); synchronize() } break; case 40: if (z.selectedIndex() < u.get(0).options.length - 1) { z.selectedIndex(z.selectedIndex() + 1); synchronize() } break; default: return true } return false }); function draw() { m.css("text-decoration", "none"); m.width(m.outerWidth()); m.height(m.outerHeight()); q.css("position", "relative"); q.css("width", m.outerWidth()); if ($.browser.msie) q.css("z-index", h); r.css({ "position": "absolute", "top": 0, "left": 0, "width": m.outerWidth(), "height": m.outerHeight(), "background-color": "#FFFFFF", "opacity": "0.01" }); t.attr("type", "text"); t.hide(); t.height(m.outerHeight()); t.css({ "position": "absolute", "top": 0, "left": 0, "margin": "0px", "padding": "0px", "outline-style": "none", "border-style": "solid", "border-bottom-style": "none", "border-color": "transparent", "background-color": "transparent" }); var a = new Array(); a.push("border-left-width"); a.push("border-top-width"); a.push("font-size"); a.push("font-stretch"); a.push("font-variant"); a.push("font-weight"); a.push("color"); a.push("text-align"); a.push("text-indent"); a.push("text-shadow"); a.push("text-transform"); a.push("padding-left"); a.push("padding-top"); for (var i = 0; i < a.length; i++) t.css(a[i], m.css(a[i])); if ($.browser.msie && parseInt(jQuery.browser.version) < 8) { t.css("padding", "0px"); t.css("padding-left", "3px"); t.css("border-left-width", "2px"); t.css("border-top-width", "3px") } else if ($.browser.chrome) { t.height(m.innerHeight()); t.css("text-transform", "none"); t.css("padding-left", parseFloatPx(t.css("padding-left")) + 3); t.css("padding-top", 2) } else if ($.browser.safari) { t.height(m.innerHeight()); t.css("padding-top", 2); t.css("padding-left", 3); t.css("text-transform", "none") } else if ($.browser.opera) { t.height(m.innerHeight()); var b = parseFloatPx(m.css("padding-left")); t.css("padding-left", b == 1 ? b + 1 : b); t.css("padding-top", 0) } else if ($.browser.mozilla) { t.css("padding-top", "0px"); t.css("border-top", "0px"); t.css("padding-left", parseFloatPx(m.css("padding-left")) + 3) } else { t.css("padding-left", parseFloatPx(m.css("padding-left")) + 3); t.css("padding-top", parseFloatPx(m.css("padding-top")) + 1) } var c = parseFloatPx(m.css("padding-left")) + parseFloatPx(m.css("padding-right")) + parseFloatPx(m.css("border-left-width")) + parseFloatPx(m.css("border-left-width")) + 23; t.width(m.outerWidth() - c); var w = m.css("width"); var d = m.outerWidth(); m.css("width", "auto"); d = d > m.outerWidth() ? d : m.outerWidth(); m.css("width", w); u.hide(); z.size(m.get(0).length); u.css({ "position": "absolute", "top": m.outerHeight(), "left": 0, "width": d, "border": "1px solid #333", "font-weight": "normal", "padding": 0, "background-color": m.css("background-color"), "text-transform": m.css("text-transform") }); var e = /^\d+$/.test(m.css("z-index")) ? m.css("z-index") : 1; if (g.zIndex && /^\d+$/.test(g.zIndex)) e = g.zIndex; r.css("z-index", (e).toString(10)); t.css("z-index", (e + 1).toString(10)); u.css("z-index", (e + 2).toString(10)); m.wrap(q); m.after(r); m.after(t); m.after(u) }; function enable(e, s, v) { if (m.attr("disabled")) return false; m.prepend("<option />"); if (typeof v == "undefined") p = !p; z.reset(); synchronize(); store(); if (s) u.show(); t.show(); t.focus(); t.select(); m.get(0).selectedIndex = 0; if (typeof e != "undefined") e.stopPropagation() }; function disable(e, a) { p = false; m.find(":first").remove(); clearSearchTimer(); t.hide(); u.hide(); if (typeof a != "undefined") restore(); populate(); if (typeof e != "undefined") e.stopPropagation() }; function clearSearchTimer() { if (j != null) clearTimeout(j) }; function populate() { if (z.selectedIndex() < 0 || z.selected().get(0).disabled) return; m.get(0).selectedIndex = parseInt(u.find(":selected").attr(o)); m.change(); m.data("index", new Number(m.get(0).selectedIndex)) }; function synchronize() { if (z.selectedIndex() > -1 && !z.selected().get(0).disabled) t.val(u.find(":selected").text()); else t.val(m.find(":selected").text()) }; function store() { n.index = z.selectedIndex(); n.options = new Array(); for (var i = 0; i < u.get(0).options.length; i++) n.options.push(u.get(0).options[i]) }; function restore() { u.empty(); for (var i = 0; i < n.options.length; i++) u.append(n.options[i]); z.selectedIndex(n.index); z.size(n.options.length) }; function escapeRegExp(a) { var b = ["/", ".", "*", "+", "?", "|", "(", ")", "[", "]", "{", "}", "\\", "^", "$"]; var c = new RegExp("(\\" + b.join("|\\") + ")", "g"); return a.replace(c, "\\$1") }; function searching() { if (k == l) { j = null; return } var a = 0; k = l; u.hide(); u.empty(); var b = escapeRegExp(l); if (g.exactMatch) b = "^" + b; if (g.wildcards) { b = b.replace(/\\\*/g, ".*"); b = b.replace(/\\\?/g, ".") } var c = null; if (g.ignoreCase) c = "i"; l = new RegExp(b, c); for (var i = 1; i < m.get(0).length && a < g.maxMultiMatch; i++) { if (l.length == 0 || l.test(m.get(0).options[i].text)) { var d = $(m.get(0).options[i]).clone().attr(o, i - 1); if (m.data("index") == i) d.text(m.data("text")); u.append(d); a++ } } if (a >= 1) { z.selectedIndex(0) } else if (a == 0) { u.append(y) } if (a >= g.maxMultiMatch) { u.append(x) } z.size(a); u.show(); j = null }; function parseFloatPx(a) { try { a = parseFloat(a.replace(/[\s]*px/, "")); if (!isNaN(a)) return a } catch (e) { } return 0 }; return }; function register(d) { var e = $[d] = {}; $.fn[d] = function (b) { b = $.extend(e.defaults, b); var c = this.size(); return this.each(function (a) { e.execute.call(this, b, c - a) }) }; return e } })(jQuery);
Step 2:
Copy
& Paste below code in other JS file and include in your Parent or Master
Page.
function modifySelect() { $("select").get(0).selectedIndex
= 5 } function appendSelectOption(e) { $("select").append('<option
value="' + e + '">' + e +
"</option>") } function applyOptions() { $("select").searchable({
maxListSize: $("#maxListSize").val(),
maxMultiMatch: $("#maxMultiMatch").val(),
latency: $("#latency").val(),
exactMatch: $("#exactMatch").get(0).checked,
wildcards: $("#wildcards").get(0).checked,
ignoreCase: $("#ignoreCase").get(0).checked
}) } $(document).ready(function () { $("select").searchable() }),
$(document).ready(function () { $("#value").html($("#myselect
:selected").text() + " (VALUE:
" + $("#myselect").val()
+ ")"), $("select").change(function () { $("#value").html(this.options[this.selectedIndex].text
+ " (VALUE: " + this.value + ")")
}) });
My page code snap
shot is below:
You can
observe in the above screen, that I included online jQuery file (I suggest you
to include it after download) & 2 other JS files where I copied the code of
Step 1 and Step 2.
Your all drop downs will look like this, where you can type the letter and select the required value.
Your all drop downs will look like this, where you can type the letter and select the required value.
That’s
it, enjoyJ, and Share your comments.
No comments:
Post a Comment