<!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>
下拉列表控件演示
<div id="demolist"></div>
<div>
<HR>
基于select生成
<BR>
<select id="vlist">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected>Item3</option>
<option value="11">Item11</option>
<option value="22">Item22</option>
<option value="33">Item33</option>
<option value="4">Item4</option>
<option value="44">Item44</option>
<option value="4">Item4</option>
<option value="44">Item44</option>
<option value="4">Item4</option>
<option value="44">Item44aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option value="a">a</option>
<option value="aa">aa</option>
<option value="ap">ap</option>
<option value="app">app</option>
</select>
</div>
<HR>
基于input生成
<div>
<input id="xlist" value="">
</div>
<div>
<HR>
基于div生成
<BR>
<div id="zlist"></div>
</div>
<BR>
<span id="ylist"></span>
</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:‘宋体‘;HEIGHT: 18px;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; FONT-FAMILY: marlett;height:18px;";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; height:18px;";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;";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;div.style.width=ps.z+17;div.style.left=ps.x;div.style.height=ps.h*mx;div.style.top=ps.y+20;}else {div=document.createElement("div");div.id=this.id+"_listdiv";div.style.cssText=this.config.css.listdiv;div.style.width=ps.z+17;div.style.height=ps.h*mx;div.style.top=ps.y+20;div.style.left=ps.x;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 title=‘"+this.result[i].text+"‘ style=‘text-overflow:clip;overflow:hidden;width:"+((ps.z-6))+";‘>"+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:true}
];
var x = new xSelectList({id:"vlist",caption:"只读列表基于SELECT渲染生成"});
x.reader();
var x1 = new xSelectList({id:"xlist",caption:"只读列表基于Input.Text渲染而来"});
x1.reader();
x1.loaddata(tmpdata);
var x2 = new xSelectList({id:"zlist",caption:"可以输入模糊查询",usetype:"filterlist",onchange:function(){}});
x2.reader();
x2.loaddata(tmpdata);
//--->
</script>