首先将下面代码COPY下来写成一个js;
//自动补全
//autoInput 自动补全输入组件ID
//自动补全UL列表ID
function AutoComplete(autoInputId, autoULId) {
var child = null;
//获取服务器数据value文本框输入值,list数据库返回集合,valueProperty使用list对象的那个属性作为vlaue值
this.autoComplete = function (value,list) {
//清空上次数据
DWRUtil.removeAllOptions(autoULId);
if (child != null && value == child.innerHTML) {
return;
}
if (value == "") {
return;
}
child = null;
if (list.length > 0) {
$(autoULId).style.display = "block";
for (i = 0; i < list.length; i++) {
var title = list[i];
var li = document.createElement("li");
li.ondblclick = function () {
child = li;
$(autoInputId).value = li.innerHTML;
$(autoULId).style.display = "none";
};
li.innerHTML =title;//li.innerHTML 表示数据库中的tname
//alert(li.innerHTML);
$(autoULId).appendChild(li);
}
} else {
$(autoULId).style.display = "none";
}
};
//当按下上下按钮的时候选中数据
window.document.onkeydown = function () {
var key = window.event.keyCode;
//向下
if (key == 40) {
if (child == null) {
var nextNode = $(autoULId).firstChild;
if (nextNode != null) {
child = nextNode;
child.style.backgroundColor = "powderblue";
}
} else {
var nextNode = child.nextSibling;
if (nextNode != null) {
child.style.backgroundColor = "";
child = child.nextSibling;
child.style.backgroundColor = "powderblue";
}
}
//向上
} else {
if (key == 38) {
if (child != null) {
var previousNode = child.previousSibling;
if (previousNode != null) {
child.style.backgroundColor = "";
child = child.previousSibling;
child.style.backgroundColor = "powderblue";
}
}
} else {
if (key == 13) {
if (child != null) {
$(autoInputId).value = child.innerHTML;
$(autoULId).style.display = "none";
}
}
}
}
};
//设置补全数据位置
window.onload = function () {
var oRect = $(autoInputId).getBoundingClientRect();
$(autoULId).style.left = oRect.left - 42;
$(autoULId).style.top = oRect.top + 20;
};
}
如果以上js保存不起就将js的编码改为gbk(JS右键属性就是了),
现在就要看jsp页面了:
1.首先:导入上面写入的js,然后在web.xml去配置,然后再在IE中进去测试。找到其它的js.
2.写入以下样式
3.函数以及回调函数如下:
4.最后一步: //下面这个input是你输入的框要补的那个.. (表示不清..不知道怎么说)
onpropertychange="autoName(this.value)">