★ 喜欢看海 ★

海是那么蓝，那么宽，永远也望不到边！！！

用户操作

[即时聊天] [发私信] [加为好友]

KevinID：CharlesYY

共66947次访问，排名1687(2)，好友0人，关注者1人。

CharlesYY的文章

原创 54 篇

翻译 1 篇

转载 2 篇

评论 44 篇

Kevin的公告

醉里挑灯看JAVA，
漠然回首原来这样。

欢迎光临！！！
天空不留下鸟的痕迹，
但我已飞过！！！

coolwangyu@Gmail.com ***祝福每一位浏览过这里的朋友，希望能带给你知识和快乐！！！***

最近评论

supermagician：别个2006年的事情了，现在08了说起也没得啥子意义了

freej_：做外包是很有挑战的，做一段时间后相信你的能力会有很多提升。
你因为寻求安逸而放弃职场发展和学习的机会，我有些替你惋惜。

cgk1000：package bs;

import java.io.UnsupportedEncodingException;

public class Zh {
public static String asc2gb(String asc) {
String ret;

if (asc == null)

CharlesYY：hehe,是啊,最近想想,自从来了北京基本就没更新过.
原因:堕落了,呵呵,接受批评. 对了,好像你也好久没更新了.呵呵

ai92：怎么好久不更新了？胖子忙什么呢？

文章分类

收藏

相册

备份连接

朋友的BLOG ！！！

优秀的网站

存档

软件项目交易

订阅我的博客

Ajax应用之输入提示完全实现收藏

新一篇: Hibernate之查询效率问题 | 旧一篇: Ajax及应用框架

看了好几天ajax，感觉总是在一些原来的内容上停留，这些天，看了看ajax in action 书中输入提示得内容，觉得很有意思，以前同时写过，不过很简单，没有事件等的支持，这2天根据xml文档固定数据输入提示，修改为根据数据库内容动态更新，并应用buffalo的bulap实现，重写了一个输入提示，并封装了一下！

封装后，在需要应用输入提示的页面，只需要加入一个简单到只有1行javaScript代码的回调函数和一个调用各自页面所需的ajaxService调用即可。

写之前，看也看不懂，郁闷的很，现在写出来了，感觉至少清晰了些，没有以前对javascript那么恐惧了，不过，个人感觉javascript简单应用还好，复杂一点的就看不懂了，下面说说关于输入提示实现方面的东西。

功能：可实现提示输入，样式和google的相似，可以通过鼠标和上下键控制选择。主要是应用了javaScript回调和其动态的特性对功能进行封装。可以在IE和Firefox下运行。

目前限制：AjaxService输入参数(String) ,返回值 buffalo支持的返回类型 ,其中需要将需要的东西放到code字段；(改进很方便)

封装之后，页面上需要用到的script代码只有下面这些

function setPro(){
                 SetProperties(document.loginForm.txtUserInput,
                 document.loginForm.txtUserValue,
                 true,true,true,true,"No matching Data",false,null);
       }
        var END_POINT="<%=request.getContextPath()%>/xmlhttp";
        var buffalo = new Buffalo(END_POINT);
        function callService(elementSrc){
                buffalo.remoteCall("ajaxService.searchUserCode",[elementSrc], listResult);
        }

Spring配置集成

<beans>

      <bean id="ajaxService" class="com.kevin.myapp.common.ajax.AjaxServiceProcess"></bean>

            <property name="target">
                <bean class="com.kevin.myapp.login.bussiness.LoginServiceImpl">
                    <property name="loginDAO"><ref local="loginDAO"/></property>
                </bean>
            </property>
        </bean>

       <bean id="loginService" parent="baseTxProxy">


        <bean id="loginDAO" parent="baseTxProxy">
            <property name="target">
                <bean class="com.kevin.myapp.login.dao.LoginDAOImpl">
                    <property name="sessionFactory">
                        <ref bean="mySessionFactory" />
                    </property>
                </bean>
            </property>
        </bean>
</beans>

AjaxServiceProcess例子

public List searchUserCode(String queryCode){
                     LoginService loginService = (LoginService)KevinApplicationContext.getBean("loginService");
                      List list = loginService.searchUserCode(queryCode);
		     return list;
    }

页面的例子

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-bean" prefix="bean" %>

<html>

<head>
    <title>Login Success</title>
    <script src="<%=request.getContextPath()%>/scripts/buffalo.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/wytest.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/prototype.js"></script>

    <script type="text/javascript">
        var END_POINT="<%=request.getContextPath()%>/xmlhttp";
        var buffalo = new Buffalo(END_POINT);
        function callService(elementSrc){
            buffalo.remoteCall("ajaxService.searchUserCode",[elementSrc], listResult);
        }
        function setPro(){
            SetProperties(document.loginForm.txtUserInput,
                document.loginForm.txtUserValue,
                true,true,true,true,"No matching Data",false,null);
        }

    </script>

    <!--  *************************************     -->

    <style type="text/css">
      /* Listing 10.5--> */
      span.spanTextDropdown{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 150px;
        z-index: 101;
        background-color: #C0C0C0;
        border: 1px solid #000000;
        padding-left: 2px;
        overflow: visible;
        display: none;
      }

      span.spanMatchText{ text-decoration: underline;
        font-weight: bold; }
      span.spanNormalElement{ background: #C0C0C0; }
      span.spanHighElement{ background: #000040;
        color: white;
        cursor: pointer; }
      span.noMatchData{ font-weight: bold;
        color: #0000FF; }
    </style>
  </head>

<body>

    <html:form action="/login.do" focus="txtUserInput">
        <html:hidden property="state" value="login"/>
        <table cellspacing="20" cellpadding="10" border="0">
            <tr>
                <td><FONT color="green" size="10"><B>welcome, you has login success ! KevinFramework start simple run !</B></FONT></td>
            </tr>
        </table>

      AutoComplete Text Box: <input type="text"  id="txtUserInput" name="txtUserInput" />
      <input type="hidden" name="txtUserValue" ID="hidden1" />
      <input type="text" name="txtIgnore" style="display:none"/>

    </html:form>

</body>
</html>

封装的wytest.js如下所示：
 //default ajax service
//var END_POINT="<%=request.getContextPath()%>/xmlhttp";
//var buffalo = new Buffalo(END_POINT);
 var getArrayLength = 0;
var tempResultArray;

window.onload = function(){
        var elemSpan = document.createElement("span");
        elemSpan.id = "spanOutput";
        elemSpan.className = "spanTextDropdown";
        document.body.appendChild(elemSpan);
        
        //Listing 10.7
        document.loginForm.txtUserInput.obj = setPro();
          //SetProperties(document.loginForm.txtUserInput,
            //document.loginForm.txtUserValue,//'typeAheadXML.js',
            //true,true,true,true,"No matching Data",false,null);
      }
      
function SetElementPosition(theTextBoxInt){
        //alert("***********");
        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;
        xPosElement.style.width = theElemWidth;
        xPosElement.style.top = selectedPosY + theElemHeight
        xPosElement.style.display = "block";
}     
      
      
//set properties
    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;
      }
      
//add handler
    var isOpera=(navigator.userAgent.toLowerCase().indexOf("opera")!= -1);
      function AddHandler(objText){
        //alert("00000000000000");
        objText.onkeyup = GiveOptions;
        //objText.onblur = function(){
        //  if(this.obj.useTimeout)StartTimeout();
        //}
        if(isOpera)objText.onkeypress = GiveOptions;
      }      
      
      
      var theTextBox;
      var elementSrc = '';
      var arrOptions = new Array();
      var strLastValue = "";
      var bMadeRequest;
      var objLastActive;
      var currentValueSelected = -1;
      var bNoResults = false;
      var isTiming = false;
      var undeStart = "<span class='spanMatchText'>";
      var undeEnd = "</span>";
      var selectSpanStart = "<span style='width:100%;display:block;' class='spanNormalElement' onmouseover='SetHighColor(this)' ";
      var selectSpanEnd ="</span>";
      
      function GiveOptions(e){
           var intKey = -1;
           if(window.event){
              intKey = event.keyCode;
              theTextBox = event.srcElement;
              elementSrc = theTextBox.value;
              //alert("test----"+theTextBox.value);
              
              //add for position
              SetElementPosition(theTextBox);
           }
           else{
              //alert("test----"+theTextBox.value);
              intKey = e.which;
              theTextBox = e.target;
              elementSrc = theTextBox.value;
              SetElementPosition(theTextBox);
           }
           if(theTextBox.value.length == 0 && !isOpera){
              //alert("length= "+theTextBox.value.length);
              arrOptions = new Array();
              HideTheBox();
              strLastValue = "";
              objLastActive = "";
              return false;
           }
           if(objLastActive == theTextBox){
              if(intKey == 13){
                    GrabHighlighted();
                    theTextBox.blur();
                    return false;
                  }
                  else if(intKey == 38){
                    MoveHighlight(-1);
                    return false;
                  }
                  else if(intKey == 40){
                    MoveHighlight(1);
                    return false;
                  }
                  else{}
            }
            if(objLastActive != theTextBox ||
               theTextBox.value.indexOf(strLastValue) != 0 ||
              //((arrOptions.length==0 || arrOptions.length==15 ) && !bNoResults) ||
               (theTextBox.value.length <= strLastValue.length)){
                 objLastActive = theTextBox;
                 //BuildList(theTextBox.value);
            }
            
            strLastValue = theTextBox.value;
            //alert("elementSrc= "+elementSrc);
            if (elementSrc != '')
                callService(elementSrc);
                //buffalo.remoteCall("ajaxService.searchUserCode",[elementSrc], listResult);
        }
        
        var flag = false;
        function listResult(reply) {
            //alert("reply="+reply);
            var ct =document.getElementById("spanOutput");
            //alert("ct= "+ct.className);
            if(flag){
                //var len = ct.rows.length ;
                //for( var i = 0 ; i < len; i ++ ){
                //    ct.deleteRow();
                //}
            }
            flag = true;
            
            var theMatches = '';
            var responseArray = reply.getResult();
            
            //add for firefox
            tempResultArray = responseArray;
            
            getArrayLength = responseArray.length;
            if (responseArray.length == 0) {
                
                selectSpanMid = selectSpanStart+" onclick='SetText(" + 0 + ")'" +
                      " id='OptionsList_" +
                      0 + "' theArrayNumber='"+ 0 +"' " +"code='No Result"+ "'>";
                selectSpanValue = undeStart+"No Result"+undeEnd+undeEnd;
                theMatches += selectSpanMid + selectSpanValue ;
                
            } else {  
                for (var i=0;i<responseArray.length;i++) {
                    var doc = responseArray[i];
                    
                    selectSpanMid = selectSpanStart+" onclick='SetTextOnClick(" + i + ")'" +
                      " id='OptionsList_" +
                      i + "' theArrayNumber='"+ i +"' " +"code='"+ doc.code +"'>";
                    selectSpanValue = undeStart+doc.code+undeEnd+undeEnd;
                    theMatches += selectSpanMid + selectSpanValue ;
                }
                
              }
              
              if(theMatches.length > 0){
                    //alert("theMatches="+theMatches);
                    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();
                  }
              
              ShowSpan("spanOutput");
            }
            
        
        
        //hide box spanOutput
        function HideTheBox(){
            document.getElementById("spanOutput").style.display = "none";
            currentValueSelected = -1;
            //EraseTimeout();
        }
        
        //selected element
        function GrabHighlighted(){
            if(currentValueSelected >= 0){
                  //xVal is the value of array[i]
                  var xVal = document.getElementById("OptionsList_" +
                              currentValueSelected);
                  //alert("currentValueSelected= "+currentValueSelected);
                              
                  //alert("xVal= "+xVal.code);            
                              
                  SetText(xVal);
                  HideTheBox();
            }
        }
        
        function SetText(xVal){
        
            var value = tempResultArray[currentValueSelected];
            //alert(value.code);
            //add for firefox
            theTextBox.value = value.code ;//set text value
        
            //theTextBox.value = xVal.code; //set text value
            //alert("theTextBox.value= "+theTextBox.value);
            //theTextBox.obj.hidden.value = arrOptions[xVal][1];
            document.getElementById("spanOutput").style.display = "none";
            currentValueSelected = -1; //remove the selected index
        }
        
        function SetTextOnClick(elem){
            var xVal = document.getElementById("OptionsList_" +
                              currentValueSelected);
            //alert("OptionsList= " +"OptionsList_"+currentValueSelected);
            //alert("xVal= "+xVal+"   xVal.code= "+xVal.code);
            SetText(xVal);  
            HideTheBox();                
        }
        
        function MoveHighlight(xDir){
            if(currentValueSelected >= 0){
                  newValue = parseInt(currentValueSelected) + parseInt(xDir);
                  if(newValue > -1 && newValue < getArrayLength){
                        currentValueSelected = newValue;
                        SetHighColor (null);
                  }
            }
       }
       
       function SetHighColor(theTextBox){
            if(theTextBox){
              currentValueSelected =
              theTextBox.id.slice(theTextBox.id.indexOf("_")+1,
              theTextBox.id.length);
            }
            for(i = 0; i < getArrayLength; i++){
              document.getElementById('OptionsList_' + i).className =
                'spanNormalElement';
            }
            document.getElementById('OptionsList_' +
              currentValueSelected).className = 'spanHighElement';
      }
      
      
      function ShowSpan(divid){
            var xPosElement = document.getElementById(divid);
            xPosElement.style.display = "block";
       }

发表于 @ 2006年05月26日 19:23:00|评论(loading...)|编辑

新一篇: Hibernate之查询效率问题 | 旧一篇: Ajax及应用框架

评论：没有评论。

发表评论

姓名：
主页：
校验码：看不清,换一张

当前用户设置只有注册用户才能发表评论。如果你没有登录，请点击登录

★ 喜欢看海 ★

海是那么蓝，那么宽，永远也望不到边 ！！！

Ajax应用之输入提示完全实现收藏

新一篇: Hibernate之查询效率问题 | 旧一篇: Ajax及应用框架

新一篇: Hibernate之查询效率问题 | 旧一篇: Ajax及应用框架

评论：没有评论。

海是那么蓝，那么宽，永远也望不到边！！！