没人回答，自己顶下，本人的实现方法
<html>
<head>
<title></title>
<script type="text/javascript">
var intIndex = 0;
var a_selectedIndex = - 1;
arrList = new Array();
arrList[intIndex ++ ] = "1sdfsdf.com";
arrList[intIndex ++ ] = " 产品 ";
arrList[intIndex ++ ] = " b22dsafsdf";
arrList[intIndex ++ ] = " c333asdfsadf";
arrList[intIndex ++ ] = " 4444dsafasdf";
arrList[intIndex ++ ] = " dddsfddsafdsaf";
//确定位置
function getAbsoluteHeight(ob)
{
return ob.offsetHeight
}
function getAbsoluteWidth(ob)
{
return ob.offsetWidth
}
function getAbsoluteLeft(ob)
{
var s_el = 0;
el = ob;
while(el)
{
s_el = s_el + el.offsetLeft;
el = el.offsetParent;
}
return s_el
}
function getAbsoluteTop(ob)
{
var s_el = 0;
el = ob;
while(el)
{
s_el = s_el + el.offsetTop ;
el = el.offsetParent;
}
return s_el
}
function divPosition(objouter, objInput)
{
objouter.style.top = getAbsoluteHeight(objInput) + getAbsoluteTop(objInput);
objouter.style.left = getAbsoluteLeft(objInput);
objouter.style.width="300px";
}
//增加节点
function addOption(value, keyw,objouter,objInputId)
{
var v = value;//alert(v);
objouter.innerHTML += "<div onmouseover=\"this.className = 'sman_selectedStyle'\" onmouseout=\"this.className = ''\" onmousedown=\"var objInput=document.getElementById('"+objInputId+"');var str = this.innerText;dealResult(objInput,str);document.getElementById('Ignore').focus();\">" + v + "</div>";
}
//选择节点
function chageSelection(isUp, objouter)
{
if (objouter.style.display == 'none')
{
objouter.style.display = '';
}
if(a_selectedIndex == - 1 || a_selectedIndex == 0)
{
a_selectedIndex = 1;
}
else
{
if (isUp)
a_selectedIndex ++ ;
else
a_selectedIndex -- ;
}
var maxIndex = objouter.children.length - 1;
if (a_selectedIndex < 1)
{
a_selectedIndex = 1;
}
if (a_selectedIndex > maxIndex-1)
{
a_selectedIndex = maxIndex-1;
}
for (intTmp = 0; intTmp <= maxIndex; intTmp ++ )
{
if (intTmp == a_selectedIndex)
{
objouter.children[intTmp].className = "sman_selectedStyle";
}
else
{
objouter.children[intTmp].className = "";
}
}
}
//按下回车
function outSelection(Index, objInput, objouter)
{
var maxIndex = objouter.children.length - 1;
for (intTmp = 1; intTmp <= maxIndex; intTmp ++ )
{
if ( objouter.children[intTmp].className == "sman_selectedStyle")
{
a_selectedIndex = intTmp;
}
}
var Str = objouter.children[a_selectedIndex].innerText;
dealResult(objInput,Str);
objouter.style.display = 'none';
a_selectedIndex = - 1;
}
//查找和显示
function checkAndShow(objouter, objInput)
{
var strInput = objInput.value;
var dispNum = 10;
if (strInput != "")
{
divPosition(objouter, objInput);
a_selectedIndex = 1;
objouter.innerHTML = "<div style='background:#E8F7EB;'>品名 规格 商品编号 单位</div> ";
for (intTmp = 0; intTmp < arrList.length; intTmp ++ )
{
if(arrList[intTmp].indexOf(strInput) > 0 && dispNum > 0)
{
addOption(arrList[intTmp], strInput, objouter, objInput.id);
dispNum -- ;
}
}
objouter.innerHTML += "<div style='float:right;'><a href='#'onclick=\"document.getElementById('__smanDisp').style.display = 'none'\">关闭</a></div>"
objouter.style.display = 'block';
}
else
{
objouter.style.display = 'none';
}
}
//监视按钮
function propertyChange()
{
if (event.propertyName == "value")
{
arrList.sort(function(a, b)
{
if(a.length > b.length)return 1;
else if(a.length == b.length)return a.localeCompare(b);
else return - 1;
}
)// 括号
var objInputId = event.srcElement.id;
var objouter = document.getElementById('__smanDisp');
var objInput = document.getElementById(objInputId);
// 文本框对象
var ie = (document.all) ? true : false
if (ie)
{
checkAndShow(objouter, objInput)
}
else
{
checkAndShow(objouter, objInput)
}
divPosition(objouter, objInput);
}
}
//输入框失去焦点
function noDisp()
{
document.getElementById('__smanDisp').style.display = "none";
// a_selectedIndex = - 1
}
function checkKeyCode()
{
arrList.sort(function(a, b)
{
if(a.length > b.length)return 1;
else if(a.length == b.length)return a.localeCompare(b);
else return - 1;
}
)// 括号
var objInputId = event.srcElement.id;
var objouter = document.getElementById('__smanDisp');
// 显示的DIV对象
// alert(objouter);
var objInput = document.getElementById(objInputId);
// 文本框对象
var ie = (document.all) ? true : false
if (ie)
{
var keyCode = event.keyCode
if (keyCode == 40 || keyCode == 38)
{
// 下上
var isUp = false
if(keyCode == 40) isUp = true ;
chageSelection(isUp, objouter)
}
else if (keyCode == 13)
{
// 回车
outSelection(a_selectedIndex, objInput, objouter);
}
else
{
checkAndShow(objouter, objInput)
}
}
else
{
checkAndShow(objouter, objInput)
}
divPosition(objouter, objInput);
}
//处理函数
function dealResult(objInput, str)
{
var arr = str.split(" ");
var tr = objInput.parentNode.parentNode;
for(i = 0; i < arr.length; i ++ )
{
tr.cells[i].childNodes[0].value = arr[i];
}
}
</script>
<style>
.Disp
{
background : #E8F7EB;
border : 1px solid #CCCCCC;
font - size : 14px;
cursor : default;
position : absolute;
display : none;
}
.sman_selectedStyle
{
background - Color : #102681;
color : #FFFFFF
}
</style>
</head>
<body>
<div id="__smanDisp" class="Disp"></div>
<input type="text" id="Ignore" style="display:none;"/>
<table><tr><td>
<input type="text" id="text1" value="text1" onblur="noDisp();" onkeyup="checkKeyCode();" onpropertychange="propertyChange();" /></td>
<td>
<input type="text" id="text2" />
</td>
<td>
<input type="text" id="text3" />
</td>
<td>
<input type="text" id="text4" />
</td>
</tr></table>
</body>
</html>
