下拉框模糊查询的实现
2016-04-15 16:14
501 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> xSelectList Demo </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
下拉列表控件演示
<HR>
基于div生成
<HR>
<td><input id="zlis"></input></td>
</BODY>
</HTML>
<script language="javascript">
/*
* 模糊查询
* 返回参数 无
*/
function xSelectList(c) {
var me = this;
this.id = c.id;
this.dom = c.dom;
this.usetype = c.usetype;
this.ifmult = c.ifmult;
this.defvalue = c.value;
this.onchange = c.onchange;
this.onselected = c.onselected;
this.ondropdown = c.ondropdown;
this.caption = c.caption;
this.size = c.size;
this.ui = {};
this.ui.box = null;
this.ui.btn = null;
this.info = {};
this.info.type = false;
this.info.flag = false;
this.info.tagname = "";
this.info.readered = false;
this.showdiv = null;
this.showtab = null;
this.data = [];
this.result = [];
this.keyword = "";
this.isIE = navigator.userAgent.search('MSIE') > 0;
this.config = {};
this.config.css = {};
this.config.css.box = "BORDER-RIGHT: Silver 1px solid;PADDING-RIGHT: 1px;BORDER-TOP: Silver 1px solid;PADDING-LEFT: 1px;FONT-SIZE: 12px;PADDING-BOTTOM: 1px;BORDER-LEFT: Silver 1px solid;COLOR: #000000;PADDING-TOP: 1px;BORDER-BOTTOM:
Silver 1px solid;FONT-FAMILY:'宋体';BACKGROUND-COLOR: #fefefe;";
this.config.css.textarea = "BORDER-RIGHT: Silver 1px solid;PADDING-RIGHT: 1px;BORDER-TOP: Silver 1px solid;PADDING-LEFT: 1px;FONT-SIZE: 12px;PADDING-BOTTOM: 1px;BORDER-LEFT: Silver 1px solid;COLOR: #000000;PADDING-TOP: 1px;BORDER-BOTTOM:
Silver 1px solid;width:100%;FONT-FAMILY:'宋体';BACKGROUND-COLOR: #fefefe;SCROLLBAR-SHADOW-COLOR: #f9f8f5;SCROLLBAR-3DLIGHT-COLOR: #e5e4e0;SCROLLBAR-ARROW-COLOR: #88888;SCROLLBAR-TRACK-COLOR: #f9f8f5;SCROLLBAR-DARKSHADOW-COLOR: #e5e4e0";
this.config.css.btn = "BORDER-RIGHT: gray 1px solid; BORDER-TOP: Silver 1px solid; FONT-SIZE: 12px; BORDER-LEFT: whitesmoke 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid;line-height:14px;FONT-FAMILY: marlett;";
this.config.css.btn1 = "BORDER-RIGHT: gray 1px solid;width:18px; BORDER-TOP: Silver 1px solid; FONT-SIZE: 12px; BORDER-LEFT: whitesmoke 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid;";
this.config.css.listdiv = "BORDER-LEFT: Silver 1px solid;visibility:visible;BORDER-RIGHT:Silver 1px solid;BORDER-BOTTOM: Silver 1px solid;position:absolute;overflow-y:hidden;SCROLLBAR-FACE-COLOR: #D2D2D2;SCROLLBAR-HIGHLIGHT-COLOR:
#ffffff;BACKGROUND-COLOR: #fefefe;SCROLLBAR-SHADOW-COLOR: #f9f8f5;SCROLLBAR-3DLIGHT-COLOR: #e5e4e0;SCROLLBAR-ARROW-COLOR: #88888;SCROLLBAR-TRACK-COLOR: #f9f8f5;SCROLLBAR-DARKSHADOW-COLOR: #e5e4e0;";// height:180px;left:795px;top:23px;width:158px;
this.config.css.tableall = "FONT-FAMILY:'宋体';FONT-SIZE: 12px;CURSOR:pointer;cellpadding:0;cellspacing:0;BORDER-BOTTOM: Silver 0px solid;width:100%;";
this.config.css.span = "FONT-SIZE: 12px;";
if (c.dom == null || c.dom == "" || typeof (c.dom) == "undefined") {
this.dom = document.body;
} else {
if (typeof (c.dom) == "string") {
var tmpdom = document.getElementById(c.dom);
if (!tmpdom) {
tmpdom = document.getElementsByName(c.dom);
}
;
if (tmpdom) {
this.dom = tmpdom;
} else {
this.dom = document.body;
}
} else {
this.dom = c.dom;
}
}
;
if (c.id == "" || c.id == null || typeof (c.id) == "undefined") {
this.id = "xselectlist"
}
;
if (document.getElementById(this.id) || document.getElementsByName(this.id)) {
if (document.getElementById(this.id)) {
this.info.type = true;
document.getElementById(this.id).name = this.id;
} else {
this.info.type = true;
document.getElementsByName(this.id).id = this.id;
}
}
;
if (c.onchange == "" || c.onchange == null
|| typeof (c.onchange) == "undefined") {
this.onchange = function() {
};
} else {
if (typeof (c.onchange) == "function") {
this.onchange = c.onchange;
} else {
this.onchange = function() {
};
}
}
;
if (c.onselected == "" || c.onselected == null
|| typeof (c.onselected) == "undefined") {
this.onselected = function() {
};
} else {
if (typeof (c.onselected) == "function") {
this.onselected = c.onselected;
} else {
this.onselected = function() {
};
}
}
;
if (c.ondropdown == "" || c.ondropdown == null
|| typeof (c.ondropdown) == "undefined") {
this.ondropdown = function() {
};
} else {
if (typeof (c.ondropdown) == "function") {
this.ondropdown = c.ondropdown;
} else {
this.ondropdown = function() {
};
}
}
;
if (this.info.type) {
var tmpnode = document.getElementById(this.id);
if (tmpnode) {
var nodeType = tmpnode.tagName.toLowerCase();
this.info.tagname = nodeType;
}
}
;
if (c.size == "" || c.size == null || typeof (c.size) == "undefined") {
this.size = 20;
} else {
if (typeof (c.size) == "number") {
this.size = c.size;
} else {
this.size = 20;
}
}
;
if (c.caption == "" || c.caption == null
|| typeof (c.caption) == "undefined") {
this.caption = "";
} else {
if (typeof (c.caption) == "string") {
this.caption = c.caption;
} else {
this.caption = "";
}
}
;
if (typeof (c.defvalue) == "undefined") {
this.defvalue = "";
}
;
if (c.usetype == "" || typeof (c.usetype) == "undefined"
|| c.usetype == null) {
this.usetype = "list";
} else {
this.usetype = c.usetype.toLowerCase();
}
;
if (this.usetype == "listbox") {
if (c.ifmult == "" || c.ifmult == null
|| typeof (c.ifmult) == "undefined") {
this.ifmult = false;
} else {
if (typeof (c.ifmult) == "boolean") {
this.ifmult = c.ifmult;
} else {
this.ifmult = false;
}
}
} else {
this.ifmult = false;
}
;
this.reader = function() {
if (this.info.readered) {
return;
}
;
this.initui();
this.initdefvalue();
this.info.readered = true;
};
this.initui = function() {
var nodeType = this.info.tagname;
var d = [];
if (nodeType == "select") {
var nodes = document.getElementById(this.id).options;
for (var i = 0; i < nodes.length; i++) {
var dd = {};
dd.value = nodes[i].value;
dd.text = nodes[i].text;
dd.idx = i;
if (nodes[i].selected) {
dd.select = true;
} else {
dd.select = false;
}
;
d.push(dd);
}
;
this.data = d;
this.dom = document.getElementById(this.id).parentNode;
this.dom.removeChild(document.getElementById(this.id));
var oc = document.createElement("span");
oc.style.cssText = this.config.css.span;
oc.innerHTML = this.caption;
var oo = document.createElement("input");
oo.id = this.id;
oo.name = this.id;
oo.type = "text";
oo.setAttribute("ivalue", "");
oo.setAttribute("typeid", "");
oo.setAttribute("idx", -1);
oo.value = "";
oo.style.cssText = this.config.css.box;
oo.size = this.size;
this.ui.box = oo;
var ob = document.createElement("input");
ob.id = this.id + "_btn";
ob.name = this.id + "_btn";
ob.type = "button";
ob.style.cssText = this.isIE ? this.config.css.btn
: this.config.css.btn1;
ob.value = this.isIE ? "6" : "▼";
this.ui.btn = ob;
if (this.usetype == "filterlist") {
this.ui.box.readOnly = false;
this.ui.box.onfocus = this.onfocus;
this.ui.box.onblur = this.onblur;
this.ui.box.onkeyup = this.onkeyup;
this.ui.box.onkeydown = this.onkeydown;
} else {
this.ui.box.readOnly = true;
}
;
this.ui.btn.onclick = this.dropdown;
this.dom.appendChild(oc);
this.dom.appendChild(this.ui.box);
this.dom.appendChild(this.ui.btn);
} else if (nodeType == "input") {
this.dom = document.getElementById(this.id).parentNode;
this.dom.removeChild(document.getElementById(this.id));
var oc = document.createElement("span");
oc.style.cssText = this.config.css.span;
oc.innerHTML = this.caption;
var oo = document.createElement("input");
oo.id = this.id;
oo.name = this.id;
oo.type = "text";
oo.setAttribute("ivalue", "");
oo.setAttribute("typeid", "");
oo.setAttribute("idx", -1);
oo.value = "";
oo.style.cssText = this.config.css.box;
oo.size = this.size;
this.ui.box = oo;
var ob = document.createElement("input");
ob.id = this.id + "_btn";
ob.name = this.id + "_btn";
ob.type = "button";
ob.style.cssText = this.isIE ? this.config.css.btn
: this.config.css.btn1;
ob.value = this.isIE ? "6" : "▼";
this.ui.btn = ob;
if (this.usetype == "filterlist") {
this.ui.box.readOnly = false;
this.ui.box.onfocus = this.onfocus;
this.ui.box.onblur = this.onblur;
this.ui.box.onkeyup = this.onkeyup;
this.ui.box.onkeydown = this.onkeydown;
} else {
this.ui.box.readOnly = true;
}
;
this.ui.btn.onclick = this.dropdown;
this.dom.appendChild(oc);
this.dom.appendChild(this.ui.box);
this.dom.appendChild(this.ui.btn);
} else {
var oc = document.createElement("span");
oc.style.cssText = this.config.css.span;
oc.innerHTML = this.caption;
var oo = document.createElement("input");
oo.id = this.id;
oo.name = this.id;
oo.type = "text";
oo.setAttribute("ivalue", "");
oo.setAttribute("typeid", "");
oo.setAttribute("idx", -1);
oo.value = "";
oo.style.cssText = this.config.css.box;
oo.size = this.size;
this.ui.box = oo;
var ob = document.createElement("input");
ob.id = this.id + "_btn";
ob.name = this.id + "_btn";
ob.type = "button";
ob.style.cssText = this.isIE ? this.config.css.btn
: this.config.css.btn1;
ob.value = this.isIE ? "6" : "▼";
this.ui.btn = ob;
if (this.usetype == "filterlist") {
this.ui.box.readOnly = false;
this.ui.box.onfocus = this.onfocus;
this.ui.box.onblur = this.onblur;
this.ui.box.onkeyup = this.onkeyup;
this.ui.box.onkeydown = this.onkeydown;
} else {
this.ui.box.readOnly = true;
}
;
this.ui.btn.onclick = this.dropdown;
this.dom.appendChild(oc);
this.dom.appendChild(this.ui.box);
this.dom.appendChild(this.ui.btn);
}
};
this.onfocus = function() {
this.setAttribute("oldValue", this.value);
if (me.showdiv) {
me.offdisplay(false);
}
};
this.onblur = function() {
};
this.onkeyup = function() {
if (this.getAttribute("oldValue") == this.value) {
return false;
} else {
me.keyword = this.value;
if (me.keyword != "" && me.keyword != null) {
me.filterdata();
me.showlist();
} else {
me.offdisplay(false);
}
;
this.setAttribute("oldValue", this.value);
}
};
this.onkeydown = function() {
var evt = arguments[0];
evt = (evt) ? evt : ((window.event) ? window.event : "");
var key = evt.keyCode ? evt.keyCode : (evt.which ? evt.which
: evt.charCode);
if (key == 40) {
if (me.showdiv) {
if (me.showtab) {
if (parseInt(me.showtab.getAttribute("rowcount")) >= 0) {
var orow = document.getElementById(me.id
+ "_tab_rows_0");
if (orow) {
orow.onmouseover();
if (me.isIE) {
me.showtab.setActive();
} else {
}
}
}
}
}
}
;
if (key == 13) {
me.offdisplay(false);
}
};
this.dropdown = function() {
var div = me.showdiv;
if (div) {
if (div.style.display == 'none') {
me.keyword = "";
me.result = me.data;
me.showlist();
} else {
me.offdisplay(false);
}
} else {
me.keyword = "";
me.result = me.data;
me.showlist();
}
};
this.offdisplay = function(b) {
if (me.showdiv) {
if (b) {
me.showdiv.style.display = '';
me.ondropdown.call(me);
} else {
me.showdiv.style.display = 'none';
}
}
};
this.filterdata = function() {
if (this.usetype != "filterlist") {
return;
}
;
if (this.keyword == "" || this.keyword == null) {
return;
}
;
var ilist = this.data;
var d = [];
var f = this.keyword;
for (var i = 0; i < ilist.length; i++) {
if (ilist[i].text.toLowerCase().indexOf(f.toLowerCase()) >= 0) {
d.push(ilist[i]);
}
}
;
this.result = d;
};
this.showlist = function() {
var div;
var ps;
var mx = this.result.length + 2;
if (mx > 10) {
mx = 10;
}
;
ps = this.getoffset(this.ui.box, null);
if (this.showdiv) {
div = this.showdiv;
//px不加ie7以上不支持
div.style.width = ps.z + 17 + "px";
div.style.left = ps.x + "px";
div.style.height = ps.h * mx + "px";
div.style.top = ps.y + 20 + "px";
} else {
div = document.createElement("div");
div.id = this.id + "_listdiv";
div.style.cssText = this.config.css.listdiv;
div.style.width = ps.z + 17 + "px";
div.style.height = ps.h * mx + "px";
div.style.top = ps.y + 20 + "px";
div.style.left = ps.x + "px";
document.body.appendChild(div);
}
;
div.style.overflowY = "auto";
div.style.overflowX = "hidden";
div.innerHTML = "";
this.offdisplay(true);
var tab = div.appendChild(document.createElement("table"));
tab.style.cssText = this.config.css.tableall;
tab.id = me.id + "_tab";
tab.setAttribute("rowcount", this.result.length);
var keydown = function() {
var evt = arguments[0];
evt = (evt) ? evt : ((window.event) ? window.event : "");
var key = evt.keyCode ? evt.keyCode : (evt.which ? evt.which
: evt.charCode);
var rowcount = parseInt(this.getAttribute("rowcount"));
var currow = me.overrow;
var curobj = me.overobj;
if (key == 40) {
if (currow < rowcount) {
var orow = document.getElementById(this.id + "_rows_"
+ (currow + 1));
if (orow) {
if (curobj) {
curobj.onmouseout();
}
;
orow.onmouseover();
}
}
}
;
if (key == 38) {
if (currow == 0 || currow == -1) {
me.ui.box.focus();
me.offdisplay(false);
} else {
var orow = document.getElementById(this.id + "_rows_"
+ (currow - 1));
if (orow) {
if (curobj) {
curobj.onmouseout();
}
;
orow.onmouseover();
}
}
}
;
if (key == 13) {
if (curobj) {
var oldidx = me.ui.box.getAttribute("idx");
me.ui.box.value = curobj.getAttribute("text");
me.ui.box.setAttribute("ivalue", curobj
.getAttribute("value"));
me.ui.box.setAttribute("idx", curobj.getAttribute("idx"));
me.ui.box.setAttribute("typeid", curobj
.getAttribute("value"));
me.initselected(me.ui.box.getAttribute("idx"));
if (oldidx != me.ui.box.getAttribute("idx")) {
me.onchange.call(me);
}
;
me.onselected.call(me);
me.ui.box.focus();
me.offdisplay(false);
}
}
;
if (key == 27) {
me.ui.focus();
me.offdisplay(false);
}
};
if (this.isIE) {
tab.onkeydown = keydown;
} else {
tab.addEventListener("keydown", keydown, false);
}
;
for (var i = 0; i < this.result.length; i++) {
var row = tab.insertRow(-1);
row.height = "20px";
row.style.backgroundColor = "#f0f0f0";
var cell = document.createElement("td");
cell.noWrap = true;
cell.setAttribute("value", this.result[i].value);
cell.setAttribute("text", this.result[i].text);
cell.setAttribute("idx", this.result[i].idx);
cell.setAttribute("rows", i);
cell.id = me.id + "_tab_rows_" + i;
cell.innerHTML = this.result[i].text;
cell.title = this.result[i].text;
cell.innerHTML = "<span value='" + this.result[i].value
+ "' style='text-overflow:clip;overflow:hidden;width:"
+ ((ps.z - 6)) + "px;'>" + this.result[i].text + "</span>";
cell.setAttribute("evnbgcolor", "#F0F0F0");
if (this.usetype == "filterlist") {
if (this.result[i].select) {
cell.style.backgroundColor = "#FFFFCC";
cell.setAttribute("oldbgcolor", "#FFFFCC");
} else if (this.keyword.toLowerCase() == this.result[i].text
.toLowerCase()) {
cell.style.backgroundColor = "#FFFF99";
cell.setAttribute("oldbgcolor", "#FFFF99");
} else {
cell.style.backgroundColor = "#FFFFFF";
cell.setAttribute("oldbgcolor", "#FFFFFF");
}
} else {
if (this.result[i].select) {
cell.style.backgroundColor = "#FFFFCC";
cell.setAttribute("oldbgcolor", "#FFFFCC");
} else {
cell.style.backgroundColor = "#FFFFFF";
cell.setAttribute("oldbgcolor", "#FFFFFF");
}
}
;
cell.style.overflowX = "hidden";
var click = function() {
var oldidx = me.ui.box.getAttribute("idx");
me.ui.box.value = this.getAttribute("text");
me.ui.box.setAttribute("ivalue", this.getAttribute("value"));
me.ui.box.setAttribute("idx", this.getAttribute("idx"));
me.ui.box.setAttribute("typeid", this.getAttribute("value"));
me.initselected(me.ui.box.getAttribute("idx"));
if (oldidx != me.ui.box.getAttribute("idx")) {
me.onchange.call(me);
}
me.onselected.call(me);
me.ui.box.focus();
me.offdisplay(false);
};
var mouseover = function() {
me.overrow = this.getAttribute("rows");
me.overobj = this;
this.style.backgroundColor = this.getAttribute("evnbgcolor");
};
var mouseout = function() {
this.style.backgroundColor = this.getAttribute("oldbgcolor");
};
if (this.isIE) {
cell.onmouseover = mouseover;
cell.onmouseout = mouseout;
cell.onclick = click;
} else {
cell.addEventListener("mouseover", mouseover, false);
cell.addEventListener("mouseout", mouseout, false);
cell.addEventListener("click", click, false);
}
;
row.appendChild(cell);
}
;
this.offdisplay(true);
div.onclick = function() {
me.offdisplay(false);
};
if (this.result.length == 0) {
div.onmouseout = function() {
me.offdisplay(false);
}
} else {
div.onmouseout = function() {
}
}
;
this.showdiv = div;
this.showtab = tab;
};
this.initselected = function(idx) {
var ilist = this.data;
if (ilist.length < idx) {
return;
}
;
for (var i = 0; i < ilist.length; i++) {
ilist[i].select = false;
}
;
ilist[idx].select = true;
this.data = ilist;
};
this.loaddata = function(d) {
var ilist = [];
var dd = d;
var ifselect = false;
for (var i = 0; i < dd.length; i++) {
var m = {};
if (typeof (dd[i].text) == "undefined") {
m.text = "";
} else {
m.text = unescape(dd[i].text);
}
;
if (typeof (dd[i].value) == "undefined") {
m.value = "";
} else {
m.value = unescape(dd[i].value);
}
;
if (typeof (dd[i].select) == "undefined") {
m.select = false;
} else {
if (typeof (dd[i].select) != "boolean") {
m.select = false;
} else {
m.select = dd[i].select;
}
}
;
if (m.select) {
ifselect = true;
}
;
m.idx = i;
ilist.push(m);
}
;
if (!ifselect) {
if (ilist.length > 0) {
ilist[0].select = true;
}
}
;
this.data = ilist;
this.initdefvalue();
};
this.initdefvalue = function() {
var ilist = this.data;
var idx = -1;
for (var i = 0; i < ilist.length; i++) {
if (ilist[i].select) {
idx = i;
break;
}
}
;
if (idx != -1) {
this.ui.box.value = ilist[i].text;
this.ui.box.setAttribute("ivalue", ilist[i].value);
this.ui.box.setAttribute("idx", ilist[i].idx);
this.ui.box.setAttribute("typeid", ilist[i].value);
this.onselected.call(me);
}
};
this.getoffset = function(obj, offsetObj) {
var x = obj.offsetLeft;
var y = obj.offsetTop;
var z = obj.offsetWidth;
var h = obj.offsetHeight;
var tmpObj = obj.offsetParent;
var _offsetObj = (offsetObj) ? offsetObj : document.body;
while ((tmpObj != _offsetObj) && tmpObj) {
x += tmpObj.offsetLeft - tmpObj.scrollLeft + tmpObj.clientLeft;
y += tmpObj.offsetTop - tmpObj.scrollTop + tmpObj.clientTop;
tmpObj = tmpObj.offsetParent;
}
;
var cls = {};
cls.x = x;
cls.y = y;
cls.z = z;
cls.h = h;
return (cls);
};
}
var tmpdata = [
{text:"a",value:"0",select:false},
{text:"ap",value:"1",select:false},
{text:"app",value:"2",select:false},
{text:"appl",value:"3",select:false},
{text:"apple",value:"4",select:false},
{text:"apple iphone",value:"0",select:false}
];
var x2 = new xSelectList({id:"zlist",caption:"",usetype:"filterlist",onchange:function(){}});
x2.reader();
x2.loaddata(tmpdata1);
</script>
<HTML>
<HEAD>
<TITLE> xSelectList Demo </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
下拉列表控件演示
<HR>
基于div生成
<HR>
<td><input id="zlis"></input></td>
</BODY>
</HTML>
<script language="javascript">
/*
* 模糊查询
* 返回参数 无
*/
function xSelectList(c) {
var me = this;
this.id = c.id;
this.dom = c.dom;
this.usetype = c.usetype;
this.ifmult = c.ifmult;
this.defvalue = c.value;
this.onchange = c.onchange;
this.onselected = c.onselected;
this.ondropdown = c.ondropdown;
this.caption = c.caption;
this.size = c.size;
this.ui = {};
this.ui.box = null;
this.ui.btn = null;
this.info = {};
this.info.type = false;
this.info.flag = false;
this.info.tagname = "";
this.info.readered = false;
this.showdiv = null;
this.showtab = null;
this.data = [];
this.result = [];
this.keyword = "";
this.isIE = navigator.userAgent.search('MSIE') > 0;
this.config = {};
this.config.css = {};
this.config.css.box = "BORDER-RIGHT: Silver 1px solid;PADDING-RIGHT: 1px;BORDER-TOP: Silver 1px solid;PADDING-LEFT: 1px;FONT-SIZE: 12px;PADDING-BOTTOM: 1px;BORDER-LEFT: Silver 1px solid;COLOR: #000000;PADDING-TOP: 1px;BORDER-BOTTOM:
Silver 1px solid;FONT-FAMILY:'宋体';BACKGROUND-COLOR: #fefefe;";
this.config.css.textarea = "BORDER-RIGHT: Silver 1px solid;PADDING-RIGHT: 1px;BORDER-TOP: Silver 1px solid;PADDING-LEFT: 1px;FONT-SIZE: 12px;PADDING-BOTTOM: 1px;BORDER-LEFT: Silver 1px solid;COLOR: #000000;PADDING-TOP: 1px;BORDER-BOTTOM:
Silver 1px solid;width:100%;FONT-FAMILY:'宋体';BACKGROUND-COLOR: #fefefe;SCROLLBAR-SHADOW-COLOR: #f9f8f5;SCROLLBAR-3DLIGHT-COLOR: #e5e4e0;SCROLLBAR-ARROW-COLOR: #88888;SCROLLBAR-TRACK-COLOR: #f9f8f5;SCROLLBAR-DARKSHADOW-COLOR: #e5e4e0";
this.config.css.btn = "BORDER-RIGHT: gray 1px solid; BORDER-TOP: Silver 1px solid; FONT-SIZE: 12px; BORDER-LEFT: whitesmoke 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid;line-height:14px;FONT-FAMILY: marlett;";
this.config.css.btn1 = "BORDER-RIGHT: gray 1px solid;width:18px; BORDER-TOP: Silver 1px solid; FONT-SIZE: 12px; BORDER-LEFT: whitesmoke 1px solid; CURSOR: pointer; BORDER-BOTTOM: gray 1px solid;";
this.config.css.listdiv = "BORDER-LEFT: Silver 1px solid;visibility:visible;BORDER-RIGHT:Silver 1px solid;BORDER-BOTTOM: Silver 1px solid;position:absolute;overflow-y:hidden;SCROLLBAR-FACE-COLOR: #D2D2D2;SCROLLBAR-HIGHLIGHT-COLOR:
#ffffff;BACKGROUND-COLOR: #fefefe;SCROLLBAR-SHADOW-COLOR: #f9f8f5;SCROLLBAR-3DLIGHT-COLOR: #e5e4e0;SCROLLBAR-ARROW-COLOR: #88888;SCROLLBAR-TRACK-COLOR: #f9f8f5;SCROLLBAR-DARKSHADOW-COLOR: #e5e4e0;";// height:180px;left:795px;top:23px;width:158px;
this.config.css.tableall = "FONT-FAMILY:'宋体';FONT-SIZE: 12px;CURSOR:pointer;cellpadding:0;cellspacing:0;BORDER-BOTTOM: Silver 0px solid;width:100%;";
this.config.css.span = "FONT-SIZE: 12px;";
if (c.dom == null || c.dom == "" || typeof (c.dom) == "undefined") {
this.dom = document.body;
} else {
if (typeof (c.dom) == "string") {
var tmpdom = document.getElementById(c.dom);
if (!tmpdom) {
tmpdom = document.getElementsByName(c.dom);
}
;
if (tmpdom) {
this.dom = tmpdom;
} else {
this.dom = document.body;
}
} else {
this.dom = c.dom;
}
}
;
if (c.id == "" || c.id == null || typeof (c.id) == "undefined") {
this.id = "xselectlist"
}
;
if (document.getElementById(this.id) || document.getElementsByName(this.id)) {
if (document.getElementById(this.id)) {
this.info.type = true;
document.getElementById(this.id).name = this.id;
} else {
this.info.type = true;
document.getElementsByName(this.id).id = this.id;
}
}
;
if (c.onchange == "" || c.onchange == null
|| typeof (c.onchange) == "undefined") {
this.onchange = function() {
};
} else {
if (typeof (c.onchange) == "function") {
this.onchange = c.onchange;
} else {
this.onchange = function() {
};
}
}
;
if (c.onselected == "" || c.onselected == null
|| typeof (c.onselected) == "undefined") {
this.onselected = function() {
};
} else {
if (typeof (c.onselected) == "function") {
this.onselected = c.onselected;
} else {
this.onselected = function() {
};
}
}
;
if (c.ondropdown == "" || c.ondropdown == null
|| typeof (c.ondropdown) == "undefined") {
this.ondropdown = function() {
};
} else {
if (typeof (c.ondropdown) == "function") {
this.ondropdown = c.ondropdown;
} else {
this.ondropdown = function() {
};
}
}
;
if (this.info.type) {
var tmpnode = document.getElementById(this.id);
if (tmpnode) {
var nodeType = tmpnode.tagName.toLowerCase();
this.info.tagname = nodeType;
}
}
;
if (c.size == "" || c.size == null || typeof (c.size) == "undefined") {
this.size = 20;
} else {
if (typeof (c.size) == "number") {
this.size = c.size;
} else {
this.size = 20;
}
}
;
if (c.caption == "" || c.caption == null
|| typeof (c.caption) == "undefined") {
this.caption = "";
} else {
if (typeof (c.caption) == "string") {
this.caption = c.caption;
} else {
this.caption = "";
}
}
;
if (typeof (c.defvalue) == "undefined") {
this.defvalue = "";
}
;
if (c.usetype == "" || typeof (c.usetype) == "undefined"
|| c.usetype == null) {
this.usetype = "list";
} else {
this.usetype = c.usetype.toLowerCase();
}
;
if (this.usetype == "listbox") {
if (c.ifmult == "" || c.ifmult == null
|| typeof (c.ifmult) == "undefined") {
this.ifmult = false;
} else {
if (typeof (c.ifmult) == "boolean") {
this.ifmult = c.ifmult;
} else {
this.ifmult = false;
}
}
} else {
this.ifmult = false;
}
;
this.reader = function() {
if (this.info.readered) {
return;
}
;
this.initui();
this.initdefvalue();
this.info.readered = true;
};
this.initui = function() {
var nodeType = this.info.tagname;
var d = [];
if (nodeType == "select") {
var nodes = document.getElementById(this.id).options;
for (var i = 0; i < nodes.length; i++) {
var dd = {};
dd.value = nodes[i].value;
dd.text = nodes[i].text;
dd.idx = i;
if (nodes[i].selected) {
dd.select = true;
} else {
dd.select = false;
}
;
d.push(dd);
}
;
this.data = d;
this.dom = document.getElementById(this.id).parentNode;
this.dom.removeChild(document.getElementById(this.id));
var oc = document.createElement("span");
oc.style.cssText = this.config.css.span;
oc.innerHTML = this.caption;
var oo = document.createElement("input");
oo.id = this.id;
oo.name = this.id;
oo.type = "text";
oo.setAttribute("ivalue", "");
oo.setAttribute("typeid", "");
oo.setAttribute("idx", -1);
oo.value = "";
oo.style.cssText = this.config.css.box;
oo.size = this.size;
this.ui.box = oo;
var ob = document.createElement("input");
ob.id = this.id + "_btn";
ob.name = this.id + "_btn";
ob.type = "button";
ob.style.cssText = this.isIE ? this.config.css.btn
: this.config.css.btn1;
ob.value = this.isIE ? "6" : "▼";
this.ui.btn = ob;
if (this.usetype == "filterlist") {
this.ui.box.readOnly = false;
this.ui.box.onfocus = this.onfocus;
this.ui.box.onblur = this.onblur;
this.ui.box.onkeyup = this.onkeyup;
this.ui.box.onkeydown = this.onkeydown;
} else {
this.ui.box.readOnly = true;
}
;
this.ui.btn.onclick = this.dropdown;
this.dom.appendChild(oc);
this.dom.appendChild(this.ui.box);
this.dom.appendChild(this.ui.btn);
} else if (nodeType == "input") {
this.dom = document.getElementById(this.id).parentNode;
this.dom.removeChild(document.getElementById(this.id));
var oc = document.createElement("span");
oc.style.cssText = this.config.css.span;
oc.innerHTML = this.caption;
var oo = document.createElement("input");
oo.id = this.id;
oo.name = this.id;
oo.type = "text";
oo.setAttribute("ivalue", "");
oo.setAttribute("typeid", "");
oo.setAttribute("idx", -1);
oo.value = "";
oo.style.cssText = this.config.css.box;
oo.size = this.size;
this.ui.box = oo;
var ob = document.createElement("input");
ob.id = this.id + "_btn";
ob.name = this.id + "_btn";
ob.type = "button";
ob.style.cssText = this.isIE ? this.config.css.btn
: this.config.css.btn1;
ob.value = this.isIE ? "6" : "▼";
this.ui.btn = ob;
if (this.usetype == "filterlist") {
this.ui.box.readOnly = false;
this.ui.box.onfocus = this.onfocus;
this.ui.box.onblur = this.onblur;
this.ui.box.onkeyup = this.onkeyup;
this.ui.box.onkeydown = this.onkeydown;
} else {
this.ui.box.readOnly = true;
}
;
this.ui.btn.onclick = this.dropdown;
this.dom.appendChild(oc);
this.dom.appendChild(this.ui.box);
this.dom.appendChild(this.ui.btn);
} else {
var oc = document.createElement("span");
oc.style.cssText = this.config.css.span;
oc.innerHTML = this.caption;
var oo = document.createElement("input");
oo.id = this.id;
oo.name = this.id;
oo.type = "text";
oo.setAttribute("ivalue", "");
oo.setAttribute("typeid", "");
oo.setAttribute("idx", -1);
oo.value = "";
oo.style.cssText = this.config.css.box;
oo.size = this.size;
this.ui.box = oo;
var ob = document.createElement("input");
ob.id = this.id + "_btn";
ob.name = this.id + "_btn";
ob.type = "button";
ob.style.cssText = this.isIE ? this.config.css.btn
: this.config.css.btn1;
ob.value = this.isIE ? "6" : "▼";
this.ui.btn = ob;
if (this.usetype == "filterlist") {
this.ui.box.readOnly = false;
this.ui.box.onfocus = this.onfocus;
this.ui.box.onblur = this.onblur;
this.ui.box.onkeyup = this.onkeyup;
this.ui.box.onkeydown = this.onkeydown;
} else {
this.ui.box.readOnly = true;
}
;
this.ui.btn.onclick = this.dropdown;
this.dom.appendChild(oc);
this.dom.appendChild(this.ui.box);
this.dom.appendChild(this.ui.btn);
}
};
this.onfocus = function() {
this.setAttribute("oldValue", this.value);
if (me.showdiv) {
me.offdisplay(false);
}
};
this.onblur = function() {
};
this.onkeyup = function() {
if (this.getAttribute("oldValue") == this.value) {
return false;
} else {
me.keyword = this.value;
if (me.keyword != "" && me.keyword != null) {
me.filterdata();
me.showlist();
} else {
me.offdisplay(false);
}
;
this.setAttribute("oldValue", this.value);
}
};
this.onkeydown = function() {
var evt = arguments[0];
evt = (evt) ? evt : ((window.event) ? window.event : "");
var key = evt.keyCode ? evt.keyCode : (evt.which ? evt.which
: evt.charCode);
if (key == 40) {
if (me.showdiv) {
if (me.showtab) {
if (parseInt(me.showtab.getAttribute("rowcount")) >= 0) {
var orow = document.getElementById(me.id
+ "_tab_rows_0");
if (orow) {
orow.onmouseover();
if (me.isIE) {
me.showtab.setActive();
} else {
}
}
}
}
}
}
;
if (key == 13) {
me.offdisplay(false);
}
};
this.dropdown = function() {
var div = me.showdiv;
if (div) {
if (div.style.display == 'none') {
me.keyword = "";
me.result = me.data;
me.showlist();
} else {
me.offdisplay(false);
}
} else {
me.keyword = "";
me.result = me.data;
me.showlist();
}
};
this.offdisplay = function(b) {
if (me.showdiv) {
if (b) {
me.showdiv.style.display = '';
me.ondropdown.call(me);
} else {
me.showdiv.style.display = 'none';
}
}
};
this.filterdata = function() {
if (this.usetype != "filterlist") {
return;
}
;
if (this.keyword == "" || this.keyword == null) {
return;
}
;
var ilist = this.data;
var d = [];
var f = this.keyword;
for (var i = 0; i < ilist.length; i++) {
if (ilist[i].text.toLowerCase().indexOf(f.toLowerCase()) >= 0) {
d.push(ilist[i]);
}
}
;
this.result = d;
};
this.showlist = function() {
var div;
var ps;
var mx = this.result.length + 2;
if (mx > 10) {
mx = 10;
}
;
ps = this.getoffset(this.ui.box, null);
if (this.showdiv) {
div = this.showdiv;
//px不加ie7以上不支持
div.style.width = ps.z + 17 + "px";
div.style.left = ps.x + "px";
div.style.height = ps.h * mx + "px";
div.style.top = ps.y + 20 + "px";
} else {
div = document.createElement("div");
div.id = this.id + "_listdiv";
div.style.cssText = this.config.css.listdiv;
div.style.width = ps.z + 17 + "px";
div.style.height = ps.h * mx + "px";
div.style.top = ps.y + 20 + "px";
div.style.left = ps.x + "px";
document.body.appendChild(div);
}
;
div.style.overflowY = "auto";
div.style.overflowX = "hidden";
div.innerHTML = "";
this.offdisplay(true);
var tab = div.appendChild(document.createElement("table"));
tab.style.cssText = this.config.css.tableall;
tab.id = me.id + "_tab";
tab.setAttribute("rowcount", this.result.length);
var keydown = function() {
var evt = arguments[0];
evt = (evt) ? evt : ((window.event) ? window.event : "");
var key = evt.keyCode ? evt.keyCode : (evt.which ? evt.which
: evt.charCode);
var rowcount = parseInt(this.getAttribute("rowcount"));
var currow = me.overrow;
var curobj = me.overobj;
if (key == 40) {
if (currow < rowcount) {
var orow = document.getElementById(this.id + "_rows_"
+ (currow + 1));
if (orow) {
if (curobj) {
curobj.onmouseout();
}
;
orow.onmouseover();
}
}
}
;
if (key == 38) {
if (currow == 0 || currow == -1) {
me.ui.box.focus();
me.offdisplay(false);
} else {
var orow = document.getElementById(this.id + "_rows_"
+ (currow - 1));
if (orow) {
if (curobj) {
curobj.onmouseout();
}
;
orow.onmouseover();
}
}
}
;
if (key == 13) {
if (curobj) {
var oldidx = me.ui.box.getAttribute("idx");
me.ui.box.value = curobj.getAttribute("text");
me.ui.box.setAttribute("ivalue", curobj
.getAttribute("value"));
me.ui.box.setAttribute("idx", curobj.getAttribute("idx"));
me.ui.box.setAttribute("typeid", curobj
.getAttribute("value"));
me.initselected(me.ui.box.getAttribute("idx"));
if (oldidx != me.ui.box.getAttribute("idx")) {
me.onchange.call(me);
}
;
me.onselected.call(me);
me.ui.box.focus();
me.offdisplay(false);
}
}
;
if (key == 27) {
me.ui.focus();
me.offdisplay(false);
}
};
if (this.isIE) {
tab.onkeydown = keydown;
} else {
tab.addEventListener("keydown", keydown, false);
}
;
for (var i = 0; i < this.result.length; i++) {
var row = tab.insertRow(-1);
row.height = "20px";
row.style.backgroundColor = "#f0f0f0";
var cell = document.createElement("td");
cell.noWrap = true;
cell.setAttribute("value", this.result[i].value);
cell.setAttribute("text", this.result[i].text);
cell.setAttribute("idx", this.result[i].idx);
cell.setAttribute("rows", i);
cell.id = me.id + "_tab_rows_" + i;
cell.innerHTML = this.result[i].text;
cell.title = this.result[i].text;
cell.innerHTML = "<span value='" + this.result[i].value
+ "' style='text-overflow:clip;overflow:hidden;width:"
+ ((ps.z - 6)) + "px;'>" + this.result[i].text + "</span>";
cell.setAttribute("evnbgcolor", "#F0F0F0");
if (this.usetype == "filterlist") {
if (this.result[i].select) {
cell.style.backgroundColor = "#FFFFCC";
cell.setAttribute("oldbgcolor", "#FFFFCC");
} else if (this.keyword.toLowerCase() == this.result[i].text
.toLowerCase()) {
cell.style.backgroundColor = "#FFFF99";
cell.setAttribute("oldbgcolor", "#FFFF99");
} else {
cell.style.backgroundColor = "#FFFFFF";
cell.setAttribute("oldbgcolor", "#FFFFFF");
}
} else {
if (this.result[i].select) {
cell.style.backgroundColor = "#FFFFCC";
cell.setAttribute("oldbgcolor", "#FFFFCC");
} else {
cell.style.backgroundColor = "#FFFFFF";
cell.setAttribute("oldbgcolor", "#FFFFFF");
}
}
;
cell.style.overflowX = "hidden";
var click = function() {
var oldidx = me.ui.box.getAttribute("idx");
me.ui.box.value = this.getAttribute("text");
me.ui.box.setAttribute("ivalue", this.getAttribute("value"));
me.ui.box.setAttribute("idx", this.getAttribute("idx"));
me.ui.box.setAttribute("typeid", this.getAttribute("value"));
me.initselected(me.ui.box.getAttribute("idx"));
if (oldidx != me.ui.box.getAttribute("idx")) {
me.onchange.call(me);
}
me.onselected.call(me);
me.ui.box.focus();
me.offdisplay(false);
};
var mouseover = function() {
me.overrow = this.getAttribute("rows");
me.overobj = this;
this.style.backgroundColor = this.getAttribute("evnbgcolor");
};
var mouseout = function() {
this.style.backgroundColor = this.getAttribute("oldbgcolor");
};
if (this.isIE) {
cell.onmouseover = mouseover;
cell.onmouseout = mouseout;
cell.onclick = click;
} else {
cell.addEventListener("mouseover", mouseover, false);
cell.addEventListener("mouseout", mouseout, false);
cell.addEventListener("click", click, false);
}
;
row.appendChild(cell);
}
;
this.offdisplay(true);
div.onclick = function() {
me.offdisplay(false);
};
if (this.result.length == 0) {
div.onmouseout = function() {
me.offdisplay(false);
}
} else {
div.onmouseout = function() {
}
}
;
this.showdiv = div;
this.showtab = tab;
};
this.initselected = function(idx) {
var ilist = this.data;
if (ilist.length < idx) {
return;
}
;
for (var i = 0; i < ilist.length; i++) {
ilist[i].select = false;
}
;
ilist[idx].select = true;
this.data = ilist;
};
this.loaddata = function(d) {
var ilist = [];
var dd = d;
var ifselect = false;
for (var i = 0; i < dd.length; i++) {
var m = {};
if (typeof (dd[i].text) == "undefined") {
m.text = "";
} else {
m.text = unescape(dd[i].text);
}
;
if (typeof (dd[i].value) == "undefined") {
m.value = "";
} else {
m.value = unescape(dd[i].value);
}
;
if (typeof (dd[i].select) == "undefined") {
m.select = false;
} else {
if (typeof (dd[i].select) != "boolean") {
m.select = false;
} else {
m.select = dd[i].select;
}
}
;
if (m.select) {
ifselect = true;
}
;
m.idx = i;
ilist.push(m);
}
;
if (!ifselect) {
if (ilist.length > 0) {
ilist[0].select = true;
}
}
;
this.data = ilist;
this.initdefvalue();
};
this.initdefvalue = function() {
var ilist = this.data;
var idx = -1;
for (var i = 0; i < ilist.length; i++) {
if (ilist[i].select) {
idx = i;
break;
}
}
;
if (idx != -1) {
this.ui.box.value = ilist[i].text;
this.ui.box.setAttribute("ivalue", ilist[i].value);
this.ui.box.setAttribute("idx", ilist[i].idx);
this.ui.box.setAttribute("typeid", ilist[i].value);
this.onselected.call(me);
}
};
this.getoffset = function(obj, offsetObj) {
var x = obj.offsetLeft;
var y = obj.offsetTop;
var z = obj.offsetWidth;
var h = obj.offsetHeight;
var tmpObj = obj.offsetParent;
var _offsetObj = (offsetObj) ? offsetObj : document.body;
while ((tmpObj != _offsetObj) && tmpObj) {
x += tmpObj.offsetLeft - tmpObj.scrollLeft + tmpObj.clientLeft;
y += tmpObj.offsetTop - tmpObj.scrollTop + tmpObj.clientTop;
tmpObj = tmpObj.offsetParent;
}
;
var cls = {};
cls.x = x;
cls.y = y;
cls.z = z;
cls.h = h;
return (cls);
};
}
var tmpdata = [
{text:"a",value:"0",select:false},
{text:"ap",value:"1",select:false},
{text:"app",value:"2",select:false},
{text:"appl",value:"3",select:false},
{text:"apple",value:"4",select:false},
{text:"apple iphone",value:"0",select:false}
];
var x2 = new xSelectList({id:"zlist",caption:"",usetype:"filterlist",onchange:function(){}});
x2.reader();
x2.loaddata(tmpdata1);
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- JSP/PHP基于Ajax的分页功能实现
- 5个常见可用性错误和解决方案
- 开发阶段Jetty运行Jsp报错且响应空白
- js数组实现图片轮播
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- jsp简单实现页面之间共享信息的方法
- 使用BAT一句话命令实现快速合并JS、CSS
- Apache Web让JSP“动”起来
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例