/**
* 智能提示公共方法:
*
* 使用步骤:
* 将JS 引入对应的页面
* 要查询的使用方法如下:
<input name="searchData" id="searchData" type="text" class="input_search_p" onblur="searchAssist('searchData','BUILD_CN_NAME')" 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";
}
}
分享到:
相关推荐
这个“DWR数据推送封装的demo”提供了一个示例,展示了如何利用DWR来封装并处理多种类型的数据推送,从而实现更加高效、灵活的页面交互。 DWR的核心功能在于它允许JavaScript在浏览器端直接调用服务器端的Java方法...
在“DWR实现QQ消息提示”这个场景中,DWR被用来创建一个类似于QQ的消息通知系统。通常,如果要实现实时的消息推送,开发者可能会使用定时查询(比如Ajax轮询)来检查服务器是否有新消息,但这种方式会频繁请求服务器...
dwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwrdwr dwr
在本案例中,我们使用DWR来实现实时的消息提示功能,即用户A发送消息给用户B后,用户B的页面能即时显示有未读消息的通知。 1. **DWR基础概念**: DWR的核心功能是创建JavaScript和Java之间的桥梁,使得前端可以...
在这个实例中,“DWR实现Google自动提示功能”是利用DWR框架来构建一个类似于Google搜索框的自动提示功能,用户在输入框中输入时,后台会实时地根据输入内容提供相关的建议,无需页面刷新。 一、DWR框架详解: DWR...
- **RemoteObject**:用于封装服务器端的Java对象,使其能在JavaScript中调用。 - **Call**:表示一个Ajax调用,包括方法名、参数等信息。 - **Update**:用于更新HTML元素,通常与Ajax响应关联。 5. **使用场景...
dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;dwr包;
在本项目中,"ajax封装报dwr" 提供了一种简便的方式来利用Ajax技术,通过DWR框架进行后端数据的异步请求和更新。 首先,我们来看DWR的核心概念: 1. **Engine(引擎)**:DWR引擎是整个框架的核心,负责处理所有的...
dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架
DWR(Direct Web Remoting)框架是一个强大的开源工具,专门设计用于简化Web应用程序中的AJAX(Asynchronous JavaScript and XML)开发。DWR的核心理念是提供一种机制,使得JavaScript可以直接调用后端Java方法,...
pinyin4j + dwr 实现搜索框提示,部署好即可查看效果,傻瓜式测试用例,亲自建立测试用例。
具体来说,当DWR运行时,会根据配置生成一个JavaScript库,这个库包含了对服务器端JavaBean的封装,从而允许前端代码直接调用这些JavaBean的方法。 #### 三、DWR的组件 - **DWR的JavaScript引擎**:负责处理Ajax...
3. **AutoComplete**:DWR内置的自动完成功能,用于在输入框中提供下拉建议,常见于搜索框或表单填写。 4. **CSP (Cross Site Proxy)**:DWR的安全特性,防止跨站脚本攻击(XSS)和跨站请求伪造(CSRF)。 三、DWR...
4. **AutoComplete**:DWR提供了自动完成功能,用于在客户端输入框中动态提示可能的匹配项,例如在搜索框中输入内容时显示建议列表。 5. **Echo**:DWR的Echo功能允许在后台执行长时间的任务,同时保持与客户端的...
1、 导入dwr.jar包 2、 在web.xml中配置dwr,如下: <!-- 配置DWR --> <servlet-name>dwr-invoker org.directwebremoting.servlet.DwrServlet <init-param> <param-name>debug</param-name> ...
DWR (Direct Web Remoting) 是一种开源Java技术,它允许Web应用程序在浏览器和服务器之间进行实时、双向通信,使得JavaScript可以直接调用服务器端的Java方法,极大地简化了客户端和服务器端的数据交换。本笔记将...
- **Improved Error Handling**:改进的错误处理机制,提供更友好的错误提示和调试信息。 - **AJAX Push**:支持服务器向客户端推送数据,实现真正的双向通信。 3. **DWR的核心组件** - **Ajax Engine**:负责...
dwr源码
**DWR(Direct Web Remoting)**是一种Java技术,它允许Web应用程序在客户端与服务器之间进行实时通信,而无需刷新整个页面。通过DWR,我们可以使用JavaScript直接调用服务器端的Java方法,实现Ajax(Asynchronous ...