js实现下拉框根据输入值检索结果

页面显示部分：

<div style='position: relative;' id="macDiv">

<span style='margin-left: 100px; width: 20px; overflow: hidden;'>
<select name='macIp' id='macIp' style='height: 22px; width: 122px;margin-left: -100px;'></select>
</span>
<input name='inputInfo' id='inputInfo' style=' width: 100px; position: absolute; left: 0px; font-size: 14px'
οnkeyup='InputValue(this)' οnblur='NoMsg()'
οnfοcus='clearInput();this.select();InputValue(this);'>
<div id='msg'  style='border: 1px; font-size: 14px; white-space: nowrap; overflow: hidden; width: 122px; position: absolute; left: 0px; top: 20px; display: none'></div>
<input type='hidden' name='txtSection' id='txtSection'>

</div>

js实现部分：

function initMacselect()
{
$("#macIp").change(function() {
$("#inputInfo").attr("value", $("#macIp option:selected").text());
});
$.ajax({
url : "<%=contextPath%>/iCReaderInfoController/getMacOptions.do",
async : true,
type : "post",
success : function(data) 
{
$("#macIp").append(data);
$("#inputInfo").attr("value", $("#macIp option:selected").text());
}
});

}


var j = 0;
function InputValue(obj) {
var n = 1;
var tmpObj;
var src = document.all.macIp;

var length = $("#macIp option").length;

var msg = document.all.msg;

if(event.keyCode == 40)//press key 
{
j++;
for ( var i = 0; i < src.length; i++) {
tmpObj = document.getElementById("selText" + i);
if (tmpObj != null) {
tmpObj.style.backgroundColor = '#ffffff';
tmpObj.style.color = '#000000';
}
}
tmpObj = document.getElementById("selText" + j);;
if (tmpObj != null) {
tmpObj.style.backgroundColor = '#003399';
tmpObj.style.color = '#ffffff';
} else {
j = 0;
}
}
else if(event.keyCode == 38)//press key up
{
j--;
for ( var i = 0; i < src.length; i++) {
tmpObj = document.getElementById("selText" + i);
if (tmpObj != null) {
tmpObj.style.backgroundColor = '#ffffff';
tmpObj.style.color = '#000000';
}
}
tmpObj = document.getElementById("selText" + j);
if (tmpObj != null) {
tmpObj.style.backgroundColor = '#003399';
tmpObj.style.color = '#ffffff';
} else {
j = 2;
}
}
else if(event.keyCode == 13)//press enter key
{
tmpObj = document.getElementById("selText" + j);
$("#inputInfo").attr("value",tmpObj.innerHTML);
$("#msg").css("display", "none");
$("#txtSection").attr("value", tmpObj.value);
}
else
{
if (obj.value != "") {
$("#msg").css("display", "");
msg.innerHTML = "";
if (msg.hasChildNodes()) {
msg.childNodes[0].parentNode.removeChild(msg.childNodes[0]);
}


for ( var i = 0; i < src.length; i++) {
var selText = document.createElement("div");
selText.value = src(i).value;
selText.innerHTML = src(i).text;


if (src(i).text.toLowerCase().indexOf(obj.value.toLowerCase()) == 0) {
selText.setAttribute("id", "selText" + n);
selText.onmouseover = function() {
this.style.backgroundColor = '#003399';
this.style.color = '#ffffff';
};
selText.onmouseout = function() {
this.style.backgroundColor = '#ffffff';
this.style.color = '#000000';
};
selText.onclick = function() {
//document.all.inputInfo.value = this.innerHTML;
$("#inputInfo").attr("value", this.innerHTML);
$("#macIp").attr("value", this.value);
$("#msg").css("display", "none");
$("#txtSection").attr("value", this.value);
};
msg.appendChild(selText);
n++;
}
}
} else {
$("#msg").css("display", "none");
}
}

 

}


function NoMsg() {
if (document.activeElement.id == "msg")
return false;
else
$("#msg").css("display", "none");
}


function clearInput()
{
$("#inputInfo").attr("value","");
}