`
sundful
  • 浏览: 1250152 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Dwr轻松实现google的suggest功能

    博客分类:
  • Ajax
阅读更多
今天将我正在进行开发的系统中注入了ajax的suggest功能,虽然不像我看的框架那样通用,但我感觉即简单又好用,我是将dwr框架引入程序中,在javascript中调用类方法查询到oracle数据库的数据,dwr真是快捷方便。下面是实现代码:
以下是SuggestControl.js
var arrOptions = new Array();
var strLastValue = "";
var bMadeRequest;
var theTextBox;
var objLastActive;
var currentValueSelected = -1;
var bNoResults = false;
var isTiming = false;
window.onload = function() {
    var elemSpan = document.createElement("span");
    elemSpan.id = "spanOutput";
    elemSpan.className = "spanTextDropdown";
    document.body.appendChild(elemSpan);
    document.forms[0].consignOrgName.obj = 
    SetProperties(document.forms[0].consignOrgName,
    document.forms[0].consignOrgValue,'',true,true,true,true,
    "没有匹配的名称",false,true);
}
function SetProperties(xElem, xHidden, xserverCode, xignoreCase, xmatchAnywhere,
  xmatchTextBoxWidth, xshowNoMatchMessage, xnoMatchingDataMessage, xuseTimeout, 
  xtheVisibleTime) {
      var props = {
        elem: xElem, 
        hidden: xHidden, 
        serverCode: xserverCode, 
   regExFlags: ((xignoreCase) ? "i" : ""), 
   regExAny: ((xmatchAnywhere) ? "^" : ""),
      matchAnywhere: xmatchAnywhere,
      matchTextBoxWidth: xmatchTextBoxWidth, 
      theVisibleTime: xtheVisibleTime,
      showNoMatchMessage: xshowNoMatchMessage, 
      noMatchingDataMessage: xnoMatchingDataMessage,
      useTimeout: xuseTimeout
      };
     AddHandler(xElem);
     return props;
}
var isOpera = (navigator.userAgent.toLowerCase().indexOf("opera") != -1);
function AddHandler(objText){
 objText.onkeyup = GiveOptions;
 objText.onblur = function(){
  if(this.obj.useTimeout)StartTimeout();
 }
 if(isOpera)objText.onkeypress = GiveOptions;
}
function GiveOptions(e){
 var inkey = -1;
 if(window.event){
  inkey = event.keyCode;
  theTextBox = event.srcElement;
 }
 else{
  inkey = e.which;
  theTextBox = e.target;
 }
 if(theTextBox.obj.useTimeout){
  if(isTiming)EraseTimeout();
  StartTimeout();
 }
 if(theTextBox.value.length == 0 && !isOpera){
  arrOptions = new Array();
  HideTheBox();
  strLastValue = "";
  return false;
 }
 if(objLastActive == theTextBox){
  if(inkey == 13){
   GrabHighlighted();
   theTextBox.blur();
   return false;
  }
  else if(inkey == 38){
   MoveHighlight(-1);
   return false;
  }
  else if(inkey == 40){
   MoveHighlight(1);
   return false;
  }
 }
 if(objLastActive != theTextBox ||
  theTextBox.value.
  indexOf(strLastValue) != 0 ||
  ((arrOptions.length == 0 ||
  arrOptions.length == 15)
  && !bNoResults) ||
  (theTextBox.value.length
  <= strLastValue.length)){
  
  objLastActive = theTextBox;
  bMadeRequest = true;
  TypeAhead(theTextBox.value);
  }
  else if(!bMadeRequest){
   BuildList(theTextBox.value);
  }
  strLastValue = theTextBox.value;
}
function TypeAhead(xStrText) {
 arrOptions = [];
    GetData.getData(xStrText, BuildList);
    bMadeRequest = false;
}
function CreateArray(ajaxResponse){
  for(var index in ajaxResponse){
  
   var newtext = ajaxResponse[index].fcname;
   var newval = ajaxResponse[index].fcode;
   arrOptions.push(new Array(newval,newtext));
  }
}
function BuildList(theText){
 CreateArray(theText);
 SetElementPosition(theTextBox);  
 
 var theMatches = MakeMatches(strLastValue);
 theMatches = theMatches.join().replace(/\,/gi,"");
 if(theMatches.length > 0){
  document.getElementById("spanOutput").innerHTML = theMatches;
  document.getElementById("OptionsList_0").className = "spanHighElement";
  currentValueSelected = 0;
  bNoResults = false;
 }
 else{
  currentValueSelected = -1;
  bNoResults = true;
  if(theTextBox.obj.showNoMatchMessage)
   document.getElementById("spanOutput").innerHTML = 
   "<span class='noMatchData'>" + theTextBox.obj.noMatchingDataMessage + "</span>";
  else
   HideTheBox();
 }
}
function SetElementPosition(theTextBoxInt){
 var selectedPosX = 0;
 var selectedPosY = 0;
 var theElement = theTextBoxInt;
 if(!theElement) return;
 var theElemHeight = theElement.offsetHeight;
 var theElemWidth = theElement.offsetWidth;
 while(theElement != null){
  selectedPosX += theElement.offsetLeft;
  selectedPosY += theElement.offsetTop;
  theElement = theElement.offsetParent;
 }
 xPosElement = document.getElementById("spanOutput");
 xPosElement.style.left = selectedPosX;
 if(theTextBoxInt.obj.matchTextBoxWidth)
  xPosElement.style.width = theElemWidth;
 xPosElement.style.top = selectedPosY + theElemHeight;
 xPosElement.style.display = "block";
 if(theTextBoxInt.obj.useTimeout){
  xPosElement.onmouseout = StartTimeout;
  xPosElement.onmouseover = EraseTimeout;
 }
 else{
  xPosElement.onmouseout = null;
  xPosElement.onmouseover = null;
 }
}
var countForId = 0;
function MakeMatches(xCompareStr){
 countForId = 0;
 var theMatch;
 var matchArray = new Array();
 var regExp = new RegExp(theTextBox.obj.regExAny + 
  xCompareStr,theTextBox.obj.regExFlags);
 for(i = 0; i < arrOptions.length; i++){
  if(arrOptions[i][1] != null)
   theMatch = arrOptions[i][1].match(regExp);
  if(theMatch){
   matchArray[matchArray.length]=
   CreateUnderline(arrOptions[i][1],xCompareStr,i);
  }
 }
 return matchArray;
}
function CreateUnderline(xStr,xTextMatch,xVal){
 var undeStart = "<span class='spanMatchText'>";
 var undeEnd = "</span>";
 var aStart;
 var matchedText;
 var xreplace='';
 var selectSpanStart = "<span style='width:100%;display:block;'class='spanNormalElement' 
      onmouseover='SetHighColor(this)'";
 var selectSpanEnd = "</span>";
 selectSpanMid = "onclick='SetText("+xVal+")'" +"id='OptionsList_" + countForId +
 "' theArrayNumber='"+xVal+"'>";
 var regExp = new RegExp(theTextBox.obj.regExAny +
  xTextMatch,theTextBox.obj.regExFlags);
 if(xStr != undefined){
   aStart = xStr.search(regExp);
  matchedText = xStr.substring(aStart,aStart + xTextMatch.length);
  xreplace = xStr.replace(regExp,undeStart + matchedText + undeEnd);
  countForId++;
 }
 return selectSpanStart + selectSpanMid + xreplace + selectSpanEnd;
 
}
function MoveHighlight(xDir){
 if(currentValueSelected >= 0){
  newValue = parseInt(currentValueSelected) + parseInt(xDir);
  if(newValue > -1 && newValue < countForId){
   currentValueSelected = newValue;
   SetHighColor(null);
  }
 }
}
function SetHighColor(theTextBox){
 if(theTextBox){
  currentValueSelected = 
  theTextBox.id.slice(theTextBox.id.indexOf("_") + 1,
  theTextBox.id.length);
 }
 for(i = 0; i < countForId; i ++){
  document.getElementById('OptionsList_'+i).className =
  'spanNormalElement';
 }
 document.getElementById('OptionsList_' + 
  currentValueSelected).className = 'spanHighElement';
}
function SetText(xVal){
 theTextBox.value = arrOptions[xVal][1];
 theTextBox.obj.hidden.value = arrOptions[xVal][0];
 document.getElementById("spanOutput").style.display = "none";
 currentValueSelected = -1;
}
function GrabHighlighted(){
 if(currentValueSelected >= 0){
  xVal = document.getElementById("OptionsList_" +
   currentValueSelected).getAttribute("theArrayNumber");
  SetText(xVal);
  HideTheBox();
 }
}
function HideTheBox(){
 document.getElementById("spanOutput").style.display = "none";
 currentValueSelected = -1;
 EraseTimeout();
}
function EraseTimeout(){
 clearTimeout(isTiming);
 isTiming = false;
}
function StartTimeout(){
 isTiming = setTimeout("HideTheBox()",theTextBox.obj.theVisiableTime);
 }

以下是class GetDate 及类方法,以获得要查询的数据
public GetData(){}
 
 public List getData(String str){
  List list = null;
  Client cl = null;
  try {
   con = ConnectionHandler.getConnection("seaDataSource");
   st = con.createStatement();
   rs = st.executeQuery("select F_CODE,F_CNAME from view_collect where " +
     "F_SHORT like '"+str+"%' and rownum <= 5");
   while(rs.next()) {
    cl = new Client();
    cl.setFcode(rs.getString("F_CODE"));
    cl.setFcname(rs.getString("F_CNAME"));
 //   System.out.println("---"+cl.getFcname());
    if(list==null)list = new ArrayList();
    list.add(cl);
    cl = null;
   }
  } catch (Exception e) {
   e.printStackTrace();
  }finally {
   try {
    rs.close();
    st.close();
    con.close();
   } catch (Exception e) 
   {e.printStackTrace();}
  }
  return list;
 }

以下是dwr.xml中的配置
<dwr>
 <allow>
  <create creator="new" javascript="GetData">
   <param name="class" value="com.fmslite.seaexp.dao.GetData" />
  </create>
  <convert converter="bean" match="com.fmslite.seaexp.pojo.Client"/> 
 </allow>
</dwr>
//*********************以下是web.xml中的配置********************************//
<servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
    <init-param>
      <param-name>debug</param-name>
      <param-value>true</param-value>
    </init-param>
    </servlet>
  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>

以下是css的sheet文件
.span.spanTextDropdown {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 150px;
 z-index: 101;
 background-color: #F6EEFF;
 border: 1px solid #8E8DAA;
 padding-left: 2px;
 overflow: visible;
 display: none;
 font-size:8pt
}
.span.spanMatchText {
 color:#B8B8FF;
 font-weight: bold;
 font-size:8pt
}
.span.spanNormalElement {
 background: #F6EEFF;
 font-size:8pt
}
.span.spanHighElement {
 font-size:8pt;
 background: #A2A1C5;
 color: #FFFFFF;
 cursor: pointer
}
.span.noMatchData {
 font-weight: bold;
 color: #0000ff;
 font-size:8pt
}

如能配置正确以上文件及路径,即可轻松实现Suggest的基本功能。
分享到:
评论

相关推荐

    dwr3实现推送功能

    本篇文章将详细讲解如何利用DWR 3实现推送功能。 1. **DWR 3 的基本概念** DWR 3 提供了一种安全、高效的机制,使得JavaScript可以调用Java方法,并将结果返回到页面上。这种机制是基于HTTP的异步请求,因此无需...

    DWR实现Google自动提示功能

    在这个实例中,“DWR实现Google自动提示功能”是利用DWR框架来构建一个类似于Google搜索框的自动提示功能,用户在输入框中输入时,后台会实时地根据输入内容提供相关的建议,无需页面刷新。 一、DWR框架详解: DWR...

    dwr实现ajax功能ajax+dwr

    通过DWR,我们可以使用JavaScript直接调用服务器端的Java方法,实现Ajax(Asynchronous JavaScript and XML)的功能,即在后台与服务器交互数据并局部更新网页。 **Ajax**的核心是利用JavaScript进行异步数据请求,...

    dwr实现的分页功能

    DWR(Direct Web Remoting)是一个开源的Java库,它允许JavaScript在客户端与服务器端的Java对象进行直接交互,从而实现在Web应用中的Ajax(Asynchronous JavaScript and XML)功能。在本示例中,我们将深入探讨如何...

    java+dwr框架实现聊天室

    Java+dwr框架实现聊天室是使用Java语言和dwr框架实现的服务器推技术,实现了实时通信的聊天室功能。下面将详细介绍该技术的实现过程和相关知识点。 一、dwr 框架简介 dwr(Direct Web Remoting)是一种基于Ajax...

    spring3+dwr3实现聊天功能

    Spring提供稳定的服务层支持,而DWR则负责实现高效的客户端和服务器通信,尤其是Server Push特性,使得聊天功能更加实时和流畅。通过合理的架构设计和安全控制,这样的聊天系统能够为用户提供优秀的交互体验。

    struts+jdbc+dwr 实现googlemap功能

    在"struts+jdbc+dwr 实现googlemap功能"的项目中,开发者利用这些技术构建了一个功能,当用户点击地图上的特定图标时,会显示相关的公司信息,如公司电话和名称。以下是对这个项目的详细解释: 首先,Struts框架在...

    DWR3实现服务器端向客户端精确推送消息

    DWR3的消息推送功能在实时应用,如聊天室、股票报价、在线游戏等场景中非常有用。它减少了延迟,提高了用户体验。然而,需要注意的是,由于Comet技术基于长连接,可能会对服务器负载和并发性产生影响,因此在设计和...

    Ajax dwr框架实现自动补全功能

    在本文中,我们将深入探讨如何使用Ajax、Direct Web Remoting (DWR) 框架以及Hibernate ORM工具来实现一个自动补全功能。这个功能类似于百度搜索引擎中的输入提示,能够根据用户输入的字符动态地提供可能的搜索建议...

    dwr实现局部刷新

    通过以上步骤,开发者可以利用DWR轻松实现Web应用的Ajax化,提供流畅的用户体验。需要注意的是,虽然DWR简化了Ajax开发,但在实际使用时还需考虑性能优化、错误处理、安全性等方面的问题。对于初学者,可以参考给定...

    ajax dwr 框架实现二级联动下拉列表源码

    **Ajax DWR 框架实现二级联动下拉列表源码详解** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。DWR(Direct Web Remoting)则是一个用于Java web应用的开源...

    dwr实现web类似web桌面功能!

    【标题】"DWR实现Web类似Web桌面功能"揭示了一个技术应用场景,即使用Direct Web Remoting (DWR)框架在Web应用中实现类似桌面应用的交互体验。DWR是一种JavaScript库,它允许JavaScript代码直接调用服务器端的Java...

    DWR框架的实现DWR框架的实现

    在本文中,我们将探讨如何实现DWR框架,特别是利用其注解功能简化配置。 首先,为了使用DWR框架,我们需要在项目中添加必要的依赖库,包括`dwr.jar`和`common-logging.jar`。这些库提供了DWR的核心功能和日志支持。...

    DWRtree DWR实现AJAX的一个树形

    **DWR (Direct Web Remoting) 是一个开源的Java库,它允许JavaScript在客户端与服务器端之间进行直接的异步通信,从而实现AJAX(Asynchronous JavaScript and XML)应用程序的功能。DWR使得开发者无需手动编写复杂的...

    dwr实现消息提示功能

    Direct Web Remoting (DWR) 是一个开源的Java库,它允许JavaScript在浏览器端与服务器端的Java对象进行交互,从而实现动态Web应用程序的功能。在本案例中,我们使用DWR来实现实时的消息提示功能,即用户A发送消息给...

    springMvc + dwr 注解 实现消息推送

    4. **DWR接口**:定义JavaScript可以调用的远程方法,这些方法通常对应于消息服务中的功能,如`sendToUser`或`broadcastToGroup`。 5. **前端页面**:使用JavaScript和DWR API调用服务器端的方法,实现实时消息的推...

    java dwr实现的投票小功能

    Java DWR(Direct Web Remoting)是一种开源技术,用于在Web应用程序中实现实时的、双向的JavaScript到Java通信。这个“java dwr实现的投票小功能”项目显然是利用DWR来创建一个简单的投票系统,使得用户可以在前端...

    DWR + Servlet 实现文件上传功能

    本文将深入探讨如何利用DWR与Servlet实现在Web应用程序中添加文件上传功能,并且特别关注如何实现进度条展示。 DWR是一种JavaScript库,它允许在浏览器和服务器之间进行双向通信,使得动态更新页面变得更加容易。...

    dwr-下拉菜单实现

    通过以上步骤,我们可以利用DWR框架结合JavaScript技术轻松实现动态下拉菜单功能。这种方式不仅提高了开发效率,也增强了用户界面的友好性和灵活性。在实际项目开发中,根据具体需求合理运用这些技术点,能够更好地...

    dwr3实现的无刷新文件上传

    **DWR(Direct Web Remoting)**是一种Java技术,它允许JavaScript在客户端与服务器端进行交互,实现Web应用的无刷新(Ajax)功能。DWR3是DWR框架的一个版本,提高了性能,增加了新的特性,并修复了之前版本的许多...

Global site tag (gtag.js) - Google Analytics