聽很多人說過 google 輸入條件下拉筐輸入時,自動出現一些匹配的信息,這種模式相當不錯.
E8.Net架構中 已經把種輸入模式做成了控件,幫助系統改善各種錄入項的用戶體驗.
實現思路是:
1、組合 一個 TextBox 控件 、 一個DIV 控件 及 一個 SELECT | OPTION 控件
2、通過javascript動態 指定 DIV控件的位置 及 SELECT |OPTION 控件 的 options 內容
3、通過一些 事件腳本 onkeydown onmouseover....實現一些效果
代碼參考:
<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>
部分腳本代碼參考:
{
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