javascript 输入框自动提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.mouseOut{
background:#708090;
color:#fffafa;
}
.mouseOver{
background:#fffafa;
color:#000000;
}
</style>
<script type="text/javascript">
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;
var selectIndex;
var tempInputValue;
var suggest = new Array();
suggest[0] = "ab";
suggest[1] = "abc";
suggest[2] = "abcd";
function initVars(){
inputField = document.getElementById("names");
nameTable = document.getElementById("name_table");
completeDiv = document.getElementById("popup");
nameTableBody = document.getElementById("name_table_body");
}
function findNames(){
var eventkey = window.event.keyCode;
initVars();
if(eventkey == 27){
esc();
}else if(eventkey == 40 || eventkey == 38){
changeSelect(eventkey);
}else{
selectIndex = -1;
clearNames();
var inputValue = inputField.value;
tempInputValue = inputValue;
if(inputValue == null || inputValue == "")
return;
for(var i=0; i<suggest.length; i++){
if(suggest.indexOf(inputValue) == 0){
//alert(suggest.indexOf(inputValue));
setNames(inputValue, suggest);
}
}
}
}
function esc(){
while(nameTableBody.childNodes.length > 0){
nameTableBody.removeChild(nameTableBody.firstChild);
}
completeDiv.style.border = "0px";
inputField.value = tempInputValue;
}
function changeSelect(eventkey){
var suggestSize = nameTableBody.childNodes.length;
if(suggestSize == null || suggestSize == 0)
return;
if(eventkey == 40 && selectIndex < suggestSize - 1)
selectIndex++;
else if(eventkey == 38 && selectIndex > -1)
selectIndex--;
for(var i=0; i<suggestSize; i++){
if(selectIndex == -1){
nameTableBody.childNodes.style.backgroundColor = "#ffffff";
nameTableBody.childNodes.style.color = "#000000";
inputField.value = tempInputValue;
}else if(i == selectIndex){
nameTableBody.childNodes.style.backgroundColor = "#000000";
nameTableBody.childNodes.style.color = "#ffffff";
inputField.value = nameTableBody.childNodes.childNodes[0].innerHTML;
}
else{
nameTableBody.childNodes.style.backgroundColor = "#ffffff";
nameTableBody.childNodes.style.color = "#000000";
}
}
}
function clearNames(){
var ind = nameTableBody.childNodes.length;
for(var i=ind-1; i>=0; i--){
nameTableBody.removeChild(nameTableBody.childNodes);
}
completeDiv.style.border = "none";
}
function setNames(inputValue, txt){
setOffsets();
var row, cell, txtNode;
var nextNode = txt;
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function(){this.className = 'mouseOver';};
cell.onmouseover = function(){this.className = 'mouseOut';};
cell.setAttribute("bgcolor", "#fffafa");
cell.setAttribute("border", "0");
cell.onclick = function(){populateName(this);};
if(inputValue == txt)
cell.onselect = true;
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
nameTableBody.appendChild(row);
}
function setOffsets(){
var end = inputField.offsetWidth;
var left = calculateOffsetLeft(inputField);
var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
completeDiv.style.width = end + "px";
}
function calculateOffsetLeft(field){
return calculateOffset(field, "offsetLeft");
}
function calculateOffsetTop(field){
return calculateOffset(field, "offsetTop");
}
function calculateOffset(field, attr){
var offset = 0;
while(field){
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
function populateName(cell){
inputField.value = cell.firstChild.nodeValue;
clearNames();
}
function submitName(){
alert("ok");
}
</script>
</head>
<body>
输入框自动提示（ie下通过，没做其他浏览器的事件兼容）<br/>
输入：a，上下箭头选择，esc 退出提示<br/>
<form onsubmit="submitName();">
names: <input type="text" size="20" id="names" onkeyup="findNames();" style="height:20;"/>
<div style="position:absolute; margin-top:-1px;" id="popup">
<table id="name_table" bgcolor="#fffafa" border="0" cellspacing="0" cellpadding="0">
<tbody id="name_table_body"></tbody>
</table>
</div>
</form>
</body>
</html>
irini
2007-03-24 22:20:02
评论:2
阅读:1357
引用:0
哪里有错？
@2007-03-30 08:59:19 irini
请说得详细点，我好改过来
有错
@2007-03-28 15:17:48 有错
你的东东为什么有错?????????????????