问题如下:
a)当文本框得到焦点,再按向上键,它从倒数第二个开始(应该从倒数第一开始).
b)当改变文本框的值后,就没有提示了.
var maxResult = 7;
var arr1 = new Array("a", "abc", "bdsda", "adsfasdf", "454d21a", "angle", "meiwenhui", "abc", "bdsda", "adsfasdf", "454d21a");
var arr2 = new Array("s6541fd", "asfdsd", "TWINS", "SHE", "ades", "graseen", "whiste", "resd", "blsue");
//获的文本框在页面中的绝对坐标
function getPosition(obj){
var top = 0, left = 0;
//直到父容器是body
do {
top += obj.offsetTop;
left += obj.offsetLeft;
}
while (obj = obj.offsetParent);
var arr = new Array();
arr[0] = top;
arr[1] = left;
return arr;
}
//得到文本框的绝对坐标,再创建层主体就非常的方便了.
function autoComplete(textBox, menuid){
if (document.getElementById(menuid) == null) {
var left_new = getPosition(textBox)[1];
var top_new = getPosition(textBox)[0];
var newControl = document.createElement("div");
newControl.id = menuid;
document.body.appendChild(newControl);
newControl.style.position = "absolute";
newControl.style.border = "solid 1px #000000";
newControl.style.backgroundColor = "#FFFFFF";
newControl.style.width = textBox.clientWidth + "px";
newControl.style.left = left_new + "px";
newControl.style.top = (top_new + textBox.clientHeight + 2) + "px";
//创建层主体的内容
newControl.innerHTML = autoCompleteBody(textBox.value);
// return newControl;
}
else {
//document.getElementById(menuid).innerHTML = autoCompleteBody(textBox.value);
}
}
function getSearchResult(key){
switch (key) {
case "a":
return arr1;
case "s":
return arr2;
default:
return new Array();
}
}
//生成层主体的内容.
function autoCompleteBody(key){
var result = "";
var j = 0;
arr = getSearchResult(key);
if (arr.length > maxResult) {
j = maxResult;
}
else {
j = arr.length;
}
for (var i = 0; i < j; i++) {
result += "<table border='0' cellpadding='2' cellspacing='0' id='menuItem" + (i) + "' onmouseover='forceMenuItem( " + (i) + ");' width='100%' onclick='hide( " + (i) + ")'><tr><td align='left'>" + arr[i] + "</td></tr></table>";
}
return result;
}
var menuFocusIndex = -1;
//给选中的数据赋前景色
function forceMenuItem(index){
//得到上一次选中的数据项.初始化时没有上一次的选中项
var lastMenuItem = document.getElementById("menuItem" + menuFocusIndex);
//上一次不为空
if (lastMenuItem != null) {
lastMenuItem.style.backgroundColor = "white";
lastMenuItem.style.color = "#000000";
}
var menuItem = document.getElementById("menuItem" + index);
if (menuItem == null) {
document.getElementById("txt1").focus();
}
else {
menuItem.style.backgroundColor = "cadetblue";
menuItem.style.color = "#FFFFFF";
menuFocusIndex = index;
givNumber(index);
}
}
/*键盘事件*/
function catchKeyBoard(){
var keyNumber = event.keyCode;
//如果是按的向下
if (keyNumber == "40") {
if (menuFocusIndex == maxResult - 1) {
forceMenuItem(-1);
//当已达到最后一条记录时,将焦点交点文本框
menuFocusIndex = -1;
}
else {
forceMenuItem(menuFocusIndex + 1);
givNumber(menuFocusIndex);
}
}
//如果是按的向上
if (keyNumber == "38") {
if (menuFocusIndex == -1) {
//当已达到第一条记录时且还向上按时,将焦点交点文本框
forceMenuItem(maxResult - 1);
}
if (menuFocusIndex == 0) {
forceMenuItem(menuFocusIndex - 1);
menuFocusIndex = -1;
}
else {
forceMenuItem(menuFocusIndex - 1);
givNumber(menuFocusIndex);
}
}
}
function givNumber(index){
document.getElementById("txt1").value = arr[index];
document.getElementById("txt1").focus();
}
function hide(){
document.getElementById("hui").style.display = "none";
}HTML如下:
<input type="text" name="txt1" onblur=hide() id="txt1" onkeydown=catchKeyBoard() onKeyUp=autoComplete(this,'hui')>
a)当文本框得到焦点,再按向上键,它从倒数第二个开始(应该从倒数第一开始).
b)当改变文本框的值后,就没有提示了.
var maxResult = 7;
var arr1 = new Array("a", "abc", "bdsda", "adsfasdf", "454d21a", "angle", "meiwenhui", "abc", "bdsda", "adsfasdf", "454d21a");
var arr2 = new Array("s6541fd", "asfdsd", "TWINS", "SHE", "ades", "graseen", "whiste", "resd", "blsue");
//获的文本框在页面中的绝对坐标
function getPosition(obj){
var top = 0, left = 0;
//直到父容器是body
do {
top += obj.offsetTop;
left += obj.offsetLeft;
}
while (obj = obj.offsetParent);
var arr = new Array();
arr[0] = top;
arr[1] = left;
return arr;
}
//得到文本框的绝对坐标,再创建层主体就非常的方便了.
function autoComplete(textBox, menuid){
if (document.getElementById(menuid) == null) {
var left_new = getPosition(textBox)[1];
var top_new = getPosition(textBox)[0];
var newControl = document.createElement("div");
newControl.id = menuid;
document.body.appendChild(newControl);
newControl.style.position = "absolute";
newControl.style.border = "solid 1px #000000";
newControl.style.backgroundColor = "#FFFFFF";
newControl.style.width = textBox.clientWidth + "px";
newControl.style.left = left_new + "px";
newControl.style.top = (top_new + textBox.clientHeight + 2) + "px";
//创建层主体的内容
newControl.innerHTML = autoCompleteBody(textBox.value);
// return newControl;
}
else {
//document.getElementById(menuid).innerHTML = autoCompleteBody(textBox.value);
}
}
function getSearchResult(key){
switch (key) {
case "a":
return arr1;
case "s":
return arr2;
default:
return new Array();
}
}
//生成层主体的内容.
function autoCompleteBody(key){
var result = "";
var j = 0;
arr = getSearchResult(key);
if (arr.length > maxResult) {
j = maxResult;
}
else {
j = arr.length;
}
for (var i = 0; i < j; i++) {
result += "<table border='0' cellpadding='2' cellspacing='0' id='menuItem" + (i) + "' onmouseover='forceMenuItem( " + (i) + ");' width='100%' onclick='hide( " + (i) + ")'><tr><td align='left'>" + arr[i] + "</td></tr></table>";
}
return result;
}
var menuFocusIndex = -1;
//给选中的数据赋前景色
function forceMenuItem(index){
//得到上一次选中的数据项.初始化时没有上一次的选中项
var lastMenuItem = document.getElementById("menuItem" + menuFocusIndex);
//上一次不为空
if (lastMenuItem != null) {
lastMenuItem.style.backgroundColor = "white";
lastMenuItem.style.color = "#000000";
}
var menuItem = document.getElementById("menuItem" + index);
if (menuItem == null) {
document.getElementById("txt1").focus();
}
else {
menuItem.style.backgroundColor = "cadetblue";
menuItem.style.color = "#FFFFFF";
menuFocusIndex = index;
givNumber(index);
}
}
/*键盘事件*/
function catchKeyBoard(){
var keyNumber = event.keyCode;
//如果是按的向下
if (keyNumber == "40") {
if (menuFocusIndex == maxResult - 1) {
forceMenuItem(-1);
//当已达到最后一条记录时,将焦点交点文本框
menuFocusIndex = -1;
}
else {
forceMenuItem(menuFocusIndex + 1);
givNumber(menuFocusIndex);
}
}
//如果是按的向上
if (keyNumber == "38") {
if (menuFocusIndex == -1) {
//当已达到第一条记录时且还向上按时,将焦点交点文本框
forceMenuItem(maxResult - 1);
}
if (menuFocusIndex == 0) {
forceMenuItem(menuFocusIndex - 1);
menuFocusIndex = -1;
}
else {
forceMenuItem(menuFocusIndex - 1);
givNumber(menuFocusIndex);
}
}
}
function givNumber(index){
document.getElementById("txt1").value = arr[index];
document.getElementById("txt1").focus();
}
function hide(){
document.getElementById("hui").style.display = "none";
}HTML如下:
<input type="text" name="txt1" onblur=hide() id="txt1" onkeydown=catchKeyBoard() onKeyUp=autoComplete(this,'hui')>
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货