HTML 代码
<html>
<head> <script src="Scripts/jquery.searchabledropdown-1.0.8.min.js" type="text/javascript"
></script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="myselect" runat="server">
<asp:ListItem>Select</asp:ListItem>
</asp:DropDownList>
</form>
</body>
<script type="text/javascript">
$(document).ready(function () {
$("#myselect").searchable({
maxListSize: 200,
maxMultiMatch: 300,
exactMatch: false,
wildcards: true,
ignoreCase: true,
latency: 200,
warnMultiMatch: "top {0} matches ...",
warnNoMatch: "no matches ...",
zIndex: "auto"
});
});
</script>
</html>
Js代码
(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);
这段代码展示了一个使用jQuery实现的可搜索下拉列表插件，允许用户在大型下拉列表中快速查找选项。插件支持最大匹配数量限制、模糊匹配、大小写忽略等功能，并考虑了不同浏览器的兼容性问题。
5770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
