天天看點

表單中用JS和代理實作類Google、百度的模糊搜尋

一、效果:

表單中用JS和代理實作類Google、百度的模糊搜尋
表單中用JS和代理實作類Google、百度的模糊搜尋

二、在mainform表單中添加如下JS代碼:

<script language="javascript">

var intIndex=0;

arrList = new Array();

function dearray(array)//定義array

{

        arrList = array.split(',');

        intIndex = arrList.length;

}

function value() {

        <!--将Temp域中的資料放入其中,Temp域中的資料從ag_get_AllKeHuInfo代理擷取--〉

        dearray(document.all.Temp.value);

        <!--注意以下一行中的KeHuBianHao與域名要一緻-->

        smanPromptList(arrList,"KeHuBianHao")

function smanPromptList(arrList,objInputId){

                var objouter=document.getElementById("__smanDisp") //顯示的DIV對象

                var objInput = document.getElementById(objInputId); //文本框對象

                var selectedIndex=-1;

                var intTmp; //循環用的:)

                if (objInput==null) {

                     alert('smanPromptList初始化失敗:沒有找到"'+objInputId+'"文本框');

                     return ;

                }

                        //文本框失去焦點

                        objInput.onblur=function(){

                                objouter.style.display='none';

                        }

                        //文本框按鍵擡起

                        objInput.onkeyup=checkKeyCode;

                        //文本框得到焦點

                        objInput.onfocus=checkAndShow;

                        function checkKeyCode(evt){

                                evt = evt || window.event;

                                var ie = (document.all)? true:false

                                if (ie){

                                        var keyCode=evt.keyCode

                                        if (keyCode==40||keyCode==38){ //下上

                                                var isUp=false

                                                if(keyCode==40) isUp=true ;

                                                chageSelection(isUp)

                                        }else if (keyCode==13){//回車

                                                outSelection(selectedIndex);

                                        }else{

                                                checkAndShow(evt)

                                        }

                                }else{

                                        checkAndShow(evt)

                                }

                                divPosition(evt)

                        function checkAndShow(evt){

                                                var strInput = objInput.value

                                                if (strInput!=""){

                                                        divPosition(evt);

                                                        selectedIndex=-1;

                                                        objouter.innerHTML ="";

                                                        for (intTmp=0;intTmp<arrList.length;intTmp++){

                                                                if (arrList[intTmp].substr(0, strInput.length)==strInput){

                                                                        addOption(arrList[intTmp]);                                                            

                                                                }

                                                        }

                                                        objouter.style.display='';

                                                }else{

                                                        objouter.style.display='none';

                                        function addOption(value){

                                                objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + value + "</div>"        

                        function chageSelection(isUp){

                                if (objouter.style.display=='none'){

                                        objouter.style.display='';

                                        if (isUp)

                                                selectedIndex++

                                        else

                                                selectedIndex--

                                var maxIndex = objouter.children.length-1;

                                if (selectedIndex<0){

                                        selectedIndex=0

                                 }

                                if (selectedIndex>maxIndex){

                                        selectedIndex=maxIndex

                                for (intTmp=0;intTmp<=maxIndex;intTmp++){

                                        if (intTmp==selectedIndex){

                                                objouter.children[intTmp].className="sman_selectedStyle";

                                                objouter.children[intTmp].className="";

                        function outSelection(Index){

                                objInput.value = objouter.children[Index].innerText;

<!--選擇了客戶編号後顯示在KeHuBianHao域中,執行下一行DiaoYongDaiLi這個JS函數(在JS Header中),通過這個值再調用擷取客戶資訊代理,未添加此JS函數前在KeHuBianHao域的onKeyDown對象調用ag_get_v_KeHuInfo代理時

每次在下拉中選擇了客戶編号後按下Enter鍵都不能顯示正确的選擇的客戶編号

雖然能執行擷取客戶資訊的ag_get_v_KeHuInfo代理,想來想去就添加了此DiaoYongDaiLi()的JS函數來調用此代理,意即在選擇了下拉的客戶編号後通過這個客戶編号去執行此代理,但是KeHuBianHao這個域的onKeyDown對象中同樣也調用此代理,使使用者手動輸入後按下Enter鍵後同樣能調用此代理-->

                                DiaoYongDaiLi();

                        function divPosition(evt){

                                var left = 0;

                        var top    = 0;

                        var e = objInput;

                        while (e.offsetParent){

                        left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);

                        top    += e.offsetTop    + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

                        e = e.offsetParent;

                     }

                     left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);

                     top    += e.offsetTop    + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

                                objouter.style.top = (top    + objInput.clientHeight) + 'px' ;

                                objouter.style.left = left + 'px' ;    

                                objouter.style.width = objInput.clientWidth;

        }

        document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#FFFFFF;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");

        document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");

        function getAbsoluteHeight(ob){

                return ob.offsetHeight

        function getAbsoluteWidth(ob){

                return ob.offsetWidth

        function getAbsoluteLeft(ob){

                var mendingLeft = ob .offsetLeft;

                while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){

                        mendingLeft += ob .offsetParent.offsetLeft;

                        mendingOb = ob.offsetParent;

                return mendingLeft ;

        function getAbsoluteTop(ob){

                var mendingTop = ob.offsetTop;

                        mendingTop += ob .offsetParent.offsetTop;

                        ob = ob .offsetParent;

                return mendingTop ;

Number.prototype.NaN0 = function()

        return isNaN(this)?0:this;

</script>

<body onLoad="value()"></body>

三、KeHuBianHao域的onKeyDown對象JS函數:

if(event.keyCode==13){ //按下Enter鍵

     document.forms[0].getKeHuInfo.click();

}

四、DiaoYongDaiLi函數

function DiaoYongDaiLi(){ //在選擇了客戶編号後調用這個函數觸發按鈕調用擷取客戶資訊代理

     document.forms[0].getKeHuInfo.click();    

五、關于mainform中的Temp域

在mainform表單中添加一個Temp的隐藏域,在mainform打開時執行ag_get_AllKeHuInfo代理将所有客戶編号儲存在Temp這個域中,然後在上面的JS代碼中擷取;

六、ag_get_AllKeHuInfo代理

ag_get_AllKeHuInfo代理與JS在同一資料庫中,但是從另一個資料庫視圖中擷取所有客戶編号:

'--------------------------------------

'擷取所有客戶編号,供模糊搜尋用

Sub Initialize

On Error Goto errhandle

Dim session As NotesSession

Set session = New NotesSession

Dim doc As NotesDocument

Set doc = session.DocumentContext

Dim db As NotesDatabase    

Set db = session.CurrentDatabase    

Set F = New f_default

Dim dbpath As String

dbpath = F.getCurPath(db)

Dim tempdb As NotesDatabase

Set tempdb = session.GetDatabase(db.Server,dbpath+"/SM_Main_new.nsf") '客戶管理資料庫

Dim vc As NotesViewEntryCollection

Dim view As NotesView

' Set vc = F.GetSearchKeyView(tempdb,"v_all_KeHuBianHao",view,0,"True")

Set vc = F.GetSortedView(tempdb,"v_all_KeHuBianHao")

Dim temp As String

If vc.Count > 0 Then

    For i=1 To vc.Count

     temp = (temp + vc.GetNthEntry(i).ColumnValues(0)) & ","

    Next

    doc.Temp = temp

End If    

Exit Sub

errhandle:

Call F.printerrmsg(doc,"Initialize")

End Sub