点击客户名称输入内容 ,触发post请求向后台请求数据(模糊查询)。然后将请求后的数据 生成一个div 在该输入框下方显示出来。下面是具体实现方法;
js:
创建请求
//创建请求
function createXMLHttpRequest() {
xmlHttp = false;
if (window.XMLHttpRequest) { //for Mozilla
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { //for IE
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
if (xmlHttp == undefined || xmlHttp == null) {
alert("XMLHttpRequest对象创建失败!!");
} else {
this.xmlhttp = xmlHttp;
}
}
获取查询结果(输入框里的内容,每隔500ms 提交一次)
function getSearchResult(queryurl, tbname, hfnameid, iflag, btngetinfo, event) {
txtname = tbname;
txtnameid = hfnameid;
btntgetinfo = btngetinfo;
runcount = runcount + 1;
var tempscreen = screenval;
screenval = escape($(txtname).value);
var tempcount = runcount; //过滤500毫秒内的重复提交,重复不提交,空值不提交
setTimeout(function () {
if (event.keyCode != 38 && event.keyCode != 40 && event.keyCode != 32 && event.keyCode != 9 && event.keyCode != 13 && (tempcount == runcount && tempscreen != screenval && screenval.length > 0 && runcount != 1)) {
runcount = 0; //允许提交后重置运行标识
createXMLHttpRequest(); //初始化XMLHttpRequest对象
if (!xmlHttp) {
window.alert("Cannot create XMLHttpRequest instance!");
return false;
}
var parmurl = "keydata=" + escape($(txtname).value); //创建请求的URL
if (iflag == 1) { parmurl += "&f=1"; }
xmlHttp.onreadystatechange = callback; //设置处理响应的回调函数
xmlHttp.open("POST", queryurl, true); //打开与服务器的连接,使用post方式
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); //post需要设置请求表头
xmlHttp.send(parmurl); //发送请求并设置参数,参数的设置为param=value的形式
}
else {
//alert(tempcount + "," + runcount + "," + tempscreen + "," + screenval + "," + screenval.length);
}
}, 500)
if (screenval.length < 1) {
MoveDivTableBlur();
}
}
回调函数 返回查询的信息
//返回查询信息
function callback() {
//响应完成且响应正常
// if(objXMLHttp.readyState == 1){
// alert("XMLHttpRequest对象开始发送请求");
// }else if(objXMLHttp.readyState == 2){
// alert("XMLHttpRequest对象的请求发送完成");
// }else if(objXMLHttp.readyState == 3){
// alert("XMLHttpRequest对象开始读取服务器的响应");
// }else if(objXMLHttp.readyState == 4){
// alert("XMLHttpRequest对象读取服务器响应结束");
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//信息已经成功返回,开始处理信息
//返回信息为空
if (xmlHttp.responseText.trim() == "") {
//如果已存在id为contents的div 则移除然后重新生成
if ($("contents"))
document.body.removeChild(divtable);
}
else {
createTable(xmlHttp.responseText);
}
} else {
window.alert("未知错误!");
return false;
}
}
}
创建装在返回结果的载体DIV
function createTable(strtable, divheight,obj,e) {
if ($("contents"))
document.body.removeChild(divtable);
divtable = window.document.createElement("div");
divtable.setAttribute("id", "contents");
divtable.setAttribute("class", "tbData");
divtable.style.position = "absolute";
divtable.innerHTML = "";
var strcon = "<iframe style=\"position: absolute;z-index: 2;height:0px;width:0px;\" frameborder=\"0\"></iframe>";
divtable.innerHTML = strcon + strtable;
divtable.zIndex = "100";
divtable.style.zIndex = "800";
divtable.style.overflow = "auto";
divtable.style.height = "235px";
divtable.style.width = "430px";
var opt = $(txtname).offsetParent;
var oft = $(txtname).offsetTop;
var ofh = $(txtname).offsetHeight;
var ofl = $(txtname).offsetLeft;
divtable.style.top = oft + ofh + "px";
divtable.style.left = ofl + "px";
document.body.appendChild(divtable);
}
屏蔽几个特殊键盘按键
document.onkeydown = function (e) {
if (document.getElementById("gvice")) {
e = window.event || e;
switch (e.keyCode) {
case 38:
// 上方向键
currentLine--;
changeItem();
break;
case 40:
// 下方向键
currentLine++;
changeItem();
break;
// Backspace
case 32:
MoveDivTable();
break;
// Tab
case 9:
MoveDivTable();
// Enter
case 13:
MoveDivTable();
break;
default:
break;
}
}
}
选中后为文本框赋值
// 选择行
function changeItem() {
var it = document.getElementById("gvice");
for (var j = 0; j < it.rows.length; j++) {
it.rows[j].className = "bsltrowc";
}
if (currentLine < 0) {
currentLine = it.rows.length - 1;
}
if (currentLine == it.rows.length) {
currentLine = 0;
}
if (it.rows.length == 1) {
currentLine = 0;
}
if (it.rows[currentLine]) {
it.rows[currentLine].className = "sltrowc";
$(txtnameid).value = it.rows[currentLine].id;
$(txtname).value = it.rows[currentLine].cells[1].innerHTML.split('-')[0];
}
}
//单击取值
function clickItem(clicktLine) {
if (document.all) {
var it = document.getElementById("gvice").children[0];
}
else {
var it = document.getElementById("gvice");
}
for (i = 0; i < it.rows.length; i++) {
it.rows[i].className = "bsltrowc";
}
//为text文本框赋值
it.rows[clicktLine].className = "sltrowc";
$(txtnameid).value = it.rows[clicktLine].id;
$(txtname).value = it.rows[clicktLine].cells[1].innerHTML;//.split('-')[0];
currentLine = clicktLine;
if (btntgetinfo != null && btntgetinfo != "")
$(btntgetinfo).click();
}
//单击取值
function clickItemGoods(clicktLine) {
if (document.all) {
var it = document.getElementById("gvice").children[0];
}
else {
var it = document.getElementById("gvice");
}
for (i = 0; i < it.rows.length; i++) {
it.rows[i].className = "bsltrowc";
}
//为text文本框赋值
it.rows[clicktLine].className = "sltrowc";
$(txtnameid).value = it.rows[clicktLine].id;
$(txtname).value = it.rows[clicktLine].cells[1].innerHTML;//.split('-')[0];
$(txtclassname).value = it.rows[clicktLine].cells[2].innerHTML;//.split('-')[0];
$(txtbrandname).value = it.rows[clicktLine].cells[3].innerHTML;//.split('-')[0];
if ($(txtclassname).value.length < 1)
{
$(txtclassname).value = "";
}
if ($(txtbrandname).value.length < 1)
{
$(txtbrandname).value = "";
}
currentLine = clicktLine;
if (btntgetinfo != null && btntgetinfo != "")
$(btntgetinfo).click();
}
//移除Div
function MoveDivTable() {
if ($("contents")){
document.body.removeChild(divtable);
}
if ($("contentsRow")){
document.getElementById("UpdatePanel2").removeChild(divtable);
}
if (btntgetinfo != null && btntgetinfo != "")
$(btntgetinfo).click();
}
//焦点消失后移除div
function MoveDivTableBlur() {
setTimeout(function () {
if ($("contents")){
document.body.removeChild(divtable);
}
if ($("contentsRow")){
document.getElementById("UpdatePanel2").removeChild(divtable);
}
}, 200)
}
总结:在获取生成div位置时遇到一些问题 就是关于 offsetTop 以及 offsetLeft 的如何取距离父层的长度,详情可见我的另一篇博客。