制作 类似 google 下拉框的用户自定义控件的实现思路及代码参考

如果做如下效果:



听很多人说过 google 输入条件下拉筐输入时,自动出现一些匹配的信息,这种模式相当不错.

E8.Net架构中 已经把种输入模式做成了控件,帮助系统改善各种录入项的用户体验.

实现思路是:
1、组合 一个 TextBox 控件 、 一个DIV 控件 及 一个 SELECT | OPTION 控件
2、通过javascript动态 指定 DIV控件的位置 及 SELECT |OPTION 控件 的 options 内容
3、通过一些 事件脚本 onkeydown onmouseover....实现一些效果

代码参考：


<input name='itemname' autocomplete="off" id='itemname' value='' onkeydown="focusToDropDown('itemsForDropdown')" onkeyup="getItemsForDropdown('itemsForDropdownLayer','itemsForDropdown','itemname','hidXml',this);" />


<div id='itemsForDropdownLayer' onmouseover="MoverToDropDownLayer('itemsForDropdown');" style='display: none; position:absolute; width:120px; left: 120; top: 90; z-index:2'


onmouseout="hideMe('itemsForDropdownLayer','none');">


<select id='itemsForDropdown' class="combo-list" onkeydown="selectOnReturn('itemsForDropdownLayer','itemname',this);" onclick="getSelectedLabel('itemsForDropdownLayer','itemname',this);"


style='width: 100%;' size='16'> <option value=''></option> </select> </div>

部分脚本代码参考：


function getItemsForDropdown(id,idSelect,idText,idFields,obj)






{




var object = document.getElementById(id);


var objSelect = document.getElementById(idSelect);


var objText = document.getElementById(idText);


var objFields = document.getElementById(idFields);












var i = 0;


var j=0;


var sCurr = '';


var soptText='';


var blnAdd = false;








if(objFields != null)






{ var sXml = objFields.value;


xmlDroplst.loadXML(sXml);


}






if(objText != null)






{


sCurr = objText.value;


}




if(object != null)






{




var nodes = xmlDroplst.documentElement.childNodes;




if(objSelect != null)






{


objSelect.options.length = 0; //清除内容




for (i=0;i<nodes.length;i++)






{


soptText = nodes(i).getAttribute("Text");


blnAdd = false;


if(sCurr == '')






{


blnAdd = true;


}


else






{


if(soptText.indexOf(sCurr) == 0)






{


blnAdd=true;


}


}


if(blnAdd == true)






{


objSelect.add(document.createElement("OPTION"));


objSelect.options[j].text= soptText;


objSelect.options[j].value=j;


j++;


}


}






}






object.style.left = absoluteLocation(obj, 'offsetLeft') - 2 + "px";


object.style.top = absoluteLocation(obj, 'offsetTop') + obj.offsetHeight + 2 + "px";


object.style.width = obj.offsetWidth + 2 + 'px';


hideMe(id,'');


}


}




//来源于XMLHTTP异步获取,

E8.Net工作流平台为企业应用开发提供了一个起点，欢迎访问 ：http://www.feifanit.com.cn/productFlow.htm