DWR输入框智能提示封装
/**
* 智能提示公共方法：
*
* 使用步骤：
* 将JS 引入对应的页面
* 要查询的使用方法如下：
<input name="searchData" id="searchData" type="text" onkeyup="searchAssist('searchData','BUILD_CN_NAME')" >
<div style="position: absolute;" id="assistBox">
<table id="assistTable" border="0" cellspacing="0" cellpadding="0" />
<tbody id="assistBody">
</tbody>
</table>
</div>
*在对应的JS页面重写以下方法：
function searchAssist(id, valueName){
searchId = id;
showText = valueName
if ($(searchId).value.length > 0) { //调用后台代码,并且加调getUserListByPartName
//obj.name=$(searchId).value;
BuildingProListService.getBuidingProject({STARTROWNUM:'1',ENDROWNUM:'10'}, show);
}
else {
$(searchId).value = "";
}
}
*代码说明：
BuildingProListService.getBuidingProject该方法为对应的DWR方法
只需修改自己对应的DWR方法即可
*/
/**
* $是指prototype定义的一类方法
* 这个程序包里面包含了许多预定义的对象和通用性方法。编写这些方法的明显的目的就是为了减少你大量的重复编码和惯用法。
* 本方法定义的是document.getElementById，所以在后面的代码中可以使用$(searchId)
* 来达到和document.getElementById(searchId)同样的效果
*
*/
var searchId;
var showText;
function $(elementId){
return document.getElementById(elementId);
}
/**
* 在调用页面页面重写该方法即可
* 查询提示的供页面调用的方法
* 该方法使用DWR调用后台进行查询，然后回调show进行显示查询提示
* 该方法同时实现了当删除搜索文本框里所有内容时去掉查询提示
*@param id：为输入框的ID
*@param valueName:DWR方法返回JSON要显示的字段名
*/
function searchAssist(id, valueName){
searchId = id;
showText = valueName
if ($(searchId).value.length > 0) { //调用后台代码，并且加调getUserListByPartName
//obj.name=$(searchId).value;
BuildingProListService.getBuidingProject({STARTROWNUM:'1',ENDROWNUM:'10'}, show);//show()回调方法
}
else {
$(searchId).value = "";
}
}
/**
* 查询提示的主方法，该方法是由searchAssist方法来回调的
* 该方法负责将从AJAX或DWR返回回来的查询提示结果集显示到页面上
*
* @param objList 从AJAX或DWR返回回来的查询提示结果集
*/
function show(objList){
clearNames();
setOffsets();
var row, cell, txtNode;
for (var i = 0; i < objList.length; i++) {//循环读取userList中的实体类
var nextNode = objList[i][showText]; //取出name字段。searchId是实体类的用户名。我们要改的话只需修改这里就行
row = document.createElement("tr");//创建行
cell = document.createElement("td");//他建列
cell.onmouseout = function(){
this.style.backgroundColor="#FFFFFF";
};
cell.onmouseover = function(){
this.style.backgroundColor="#FFFF99";
};
cell.setAttribute("bgcolor", "#FFFFFF");//背景色
cell.setAttribute("border", "1");//设置边框
cell.onclick = function(){ //调用单击事件
completeField(this);
};
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
$("assistBody").appendChild(row);
}
}
/**
* 设置显示位置
* 这里设置的位置是在要进行查询提示的文本框的正下方
*
*/
function setOffsets(){
$("assistTable").style.width = $(searchId).offsetWidth + "px";
var left = calculateOffset($(searchId), "offsetLeft");
var top = calculateOffset($(searchId), "offsetTop") + $(searchId).offsetHeight;
$("assistBox").style.border = "black 1px solid";
$("assistBox").style.left = left + "px";
$("assistBox").style.top = top + "px";
}
/**
* 计算显示位置
*
* @param field 要进行查询提示的文本框对象
* @param attr 上下左右的常量，用于确定是要计算位置的上下左右中的哪一个
*/
function calculateOffset(field, attr){
var offset = 0;
while (field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
/**
* 填写输入框，用于向要进行查询提示的文本框对象中填写内容
* 当用户点击提示对话框中的某行内容时，调用该方法将选择的内容填入到进行查询提示的文本框中
*
* @param cell 弹出的提示框对象的cell
*/
function completeField(cell){
$(searchId).value = cell.firstChild.nodeValue;
clearNames();
}
/**
* 清除自动完成
* 当用户删除要进行查询提示的文本框中的内容是，调用本方法来清除掉上一次的查询提示内容
*
*/
function clearNames(){
if ($("assistBody") !== null) {
var childsCount = $("assistBody").childNodes.length;
for (var i = childsCount - 1; i >= 0; i--) {
$("assistBody").removeChild($("assistBody").childNodes[i]);
}
$("assistBox").style.border = "none";
}
}
