隨着Ajax的運用越來越廣泛,越來越多的用戶體驗被提升,在Domino中應用Ajax實現Google搜索提示效果,在用戶的使用過程中也是一種很實用的體驗,下面將詳細介紹下實現的思路和方法,僅供參考,以下代碼在Domino6.5和ie 6中正常運行通過,效果如下圖。
1,在表單中創建字段(域),且命名爲Google,並在域的onkeyup時間中加入以下代碼:
var google=document.all.Google.value;
if (event.keyCode ==38|event.keyCode ==40)
return
else
{
if (google=="")
document.getElementById("myend").style.display="none";
else
{
document.getElementById("myend").style.display="block";
LoadReadAppraise() //調用Ajax函數
}
}
2,在Google域的後面加入以下元素,並內置html:<div id="myend" style="border:groove;width:300;display:none;position:absolute"></div>,用於放置搜索提示內容
3,在表單的前面加入以下代碼,並內置html:
<script>
var asKey="";
var currentSelect=-1;
document.onkeydown=viewEvent;
document.onclick=displayall; //單擊頁面其他地方時,提示消失,與event.cancelBubble=true結合使用
</script>
4,在Google域的onclick時間中加入以下代碼:event.cancelBubble=true; //點擊該域時提示不消失
5,在表單的jsheader;裏面加入以下代碼:
var request;
function LoadReadAppraise() //Ajax函數,調用代理,並接受代理返回數據
{
var key=document.all.Google.value;
var rand=Math.random()*100000;
request =new ActiveXObject("Msxml2.XMLHTTP")
if (!request){
request=new ActiveXObject("Microsoft.XMLHTTP");}
request.onreadystatechange=BackAppraise; //設定回調函數
var url=服務器/數據庫.nsf/代理名?Openagent&keyword="+key+"&rand="+rand; //rand是保證瀏覽器緩存不起作用
request.open("get",url,true);
request.send(null);
}
function BackAppraise()
{
if (request.readystate==4){
if (request.status==200){
var obj=request.responseXML.documentElement.getElementsByTagName('first'); //代理返回的是xml格式數據,進行提取
var objs=request.responseXML.documentElement.getElementsByTagName('second');
var flag=obj[0].firstChild.data;
var list=""
for(var i=0;i<obj.length;i++)
{
var s="<div align='right'><font color='green'>"+objs[i].firstChild.data+"結果</font></div>";
list=list+"<div style='cursor:hand;width:100%' onclick='mouseclick(this)' onmouseover='mousemove(this)' onmouseout='mouseout(this)' values='"+obj[i].firstChild.data+"'>"+obj[i].firstChild.data+s+"</div>";
}
list=list+"";
$("#myend").html(list);
}
}
}
function viewEvent(e) // Google域的上下鍵事件,可以實現提示的切換
{
if (event.keyCode ==38)
{
currentSelect--;
changeItem(true);
};
if (event.keyCode ==40)
{
currentSelect++;
changeItem(true);
} };
function changeItem(o) //實現提示的切換
{
var it = document.getElementById("myend");
if(it.childNodes.length!=1)
{
for (var i=0;i<it.childNodes.length;i++)
{
it.childNodes[i].style.backgroundColor ="";
}
if (currentSelect <-1)
currentSelect= it.childNodes.length -2;
if (currentSelect== it.childNodes.length-1)
currentSelect=-1;
if (currentSelect<0)
{
document.getElementById("Google").value = asKey;
}
else
{
it.childNodes[currentSelect].style.backgroundColor ="#DDDDDD";
if (o)
document.getElementById("Google").value = it.childNodes[currentSelect].values;
}
document.getElementById("Google").focus();
}
else
{
it.childNodes[0].style.backgroundColor ="#DDDDDD";
document.getElementById("Google").value = it.childNodes[0].values;
}
}
function mousemove(obj) //提示的鼠標事件
{
obj.style.backgroundColor='#DDDDDD'
}
function mouseout(obj) //提示的鼠標事件
{
obj.style.backgroundColor='white'
}
function mouseclick(obj) //提示的鼠標事件
{
document.all.Google.value=obj.values;
event.cancelBubble=true; //點擊選中提示,所有提示不消失
}
function displayall()
{
document.getElementById('myend').style.display='none';
}
6,表單的html首頁內容裏,加入以下代碼:"<script type=\"text/javascript\" src=\"jquery.js\"></script>",調用jQuery,次jQuery的js文件存儲在該數據庫的共享資源的文件當中。
7,創建代理,命名爲GoogleSearch,代碼如下:
Sub Initialize
Dim Session AsNew NotesSession
Dim db As NotesDatabase
Dim view As NotesView
Dim doc As NotesDocument
Dim cgi As NotesDocument
Dim docs As NotesDocumentCollection
Set cgi = Session.DocumentContext
Set db=Session.CurrentDatabase
Dim key AsString
key= GetParameter("keyword",cgi.GetItemValue("Query_String_Decoded")(0)) 'GetParameter函數的作用是獲取url中&keyword=的值
Set view = db.GetView("視圖名")
Dim formalue AsString
formalue={Form ="文檔的表單名"& @contains(name;"}+Trim(key)+{")} 'name爲查詢文檔的一個域
Set docs=db.Search(formalue,Nothing,0)
Print "Content-type: text/xml"'輸出xml文件的表頭
Print |<?xml version="1.0" encoding="GB2312" ?> |
Print "<result>"
If docs.Count<>0Then
Dim words() AsString
Dim i AsInteger
i=1
Set doc=docs.GetFirstDocument()
WhileNot doc IsNothing
words(i)=doc.name(0) 'name爲查詢文檔的一個域,此處可根據具體情況而定
i=i+1
Set doc=docs.GetNextDocument(doc)
Wend
Dim x As Variant
x=Arrayunique(words) '去掉數組中的重複值
Dim cols As NotesDocumentCollection
Dim malue AsString
Forall one In x
If one<>""Then
malue={Form ="文檔的表單名"& @contains(name;"}+Trim(one)+{")}
Set cols=db.Search(malue,Nothing,0)
Print "<first>"'print出xml文件的格式,格式可根據自己的喜好更改
Print one
Print "</first>"
Print "<second>"
Print Cstr(cols.Count)
Print "</second>"
EndIf
End Forall
Else
Print "<first>"
Print key
Print "</first>"
Print "<second>"
Print "0"
Print "</second>"
EndIf
Print "</result>"
End Sub
上面的代碼只是爲了粗略的實現Google搜索提示的效果,在真正的使用這種效果的時候代理查詢要更復雜,前臺展示的效果要更細膩,由於代碼寫的比較倉促,以致根本來不及估計編碼規範,看得懂就好。
3,在表單的前面加入以下代碼,並內置html:
<script>
var asKey="";
var currentSelect=-1;
document.onkeydown=viewEvent;
document.onclick=displayall; //單擊頁面其他地方時,提示消失,與event.cancelBubble=true結合使用
</script>
4,在Google域的onclick時間中加入以下代碼:event.cancelBubble=true; //點擊該域時提示不消失
5,在表單的jsheader;裏面加入以下代碼:
var request;
function LoadReadAppraise() //Ajax函數,調用代理,並接受代理返回數據
{
var key=document.all.Google.value;
var rand=Math.random()*100000;
request =new ActiveXObject("Msxml2.XMLHTTP")
if (!request){
request=new ActiveXObject("Microsoft.XMLHTTP");}
request.onreadystatechange=BackAppraise; //設定回調函數
var url=服務器/數據庫.nsf/代理名?Openagent&keyword="+key+"&rand="+rand; //rand是保證瀏覽器緩存不起作用
request.open("get",url,true);
request.send(null);
}
function BackAppraise()
{
if (request.readystate==4){
if (request.status==200){
var obj=request.responseXML.documentElement.getElementsByTagName('first'); //代理返回的是xml格式數據,進行提取
var objs=request.responseXML.documentElement.getElementsByTagName('second');
var flag=obj[0].firstChild.data;
var list=""
for(var i=0;i<obj.length;i++)
{
var s="<div align='right'><font color='green'>"+objs[i].firstChild.data+"結果</font></div>";
list=list+"<div style='cursor:hand;width:100%' onclick='mouseclick(this)' onmouseover='mousemove(this)' onmouseout='mouseout(this)' values='"+obj[i].firstChild.data+"'>"+obj[i].firstChild.data+s+"</div>";
}
list=list+"";
$("#myend").html(list);
}
}
}
function viewEvent(e) // Google域的上下鍵事件,可以實現提示的切換
{
if (event.keyCode ==38)
{
currentSelect--;
changeItem(true);
};
if (event.keyCode ==40)
{
currentSelect++;
changeItem(true);
} };
function changeItem(o) //實現提示的切換
{
var it = document.getElementById("myend");
if(it.childNodes.length!=1)
{
for (var i=0;i<it.childNodes.length;i++)
{
it.childNodes[i].style.backgroundColor ="";
}
if (currentSelect <-1)
currentSelect= it.childNodes.length -2;
if (currentSelect== it.childNodes.length-1)
currentSelect=-1;
if (currentSelect<0)
{
document.getElementById("Google").value = asKey;
}
else
{
it.childNodes[currentSelect].style.backgroundColor ="#DDDDDD";
if (o)
document.getElementById("Google").value = it.childNodes[currentSelect].values;
}
document.getElementById("Google").focus();
}
else
{
it.childNodes[0].style.backgroundColor ="#DDDDDD";
document.getElementById("Google").value = it.childNodes[0].values;
}
}
function mousemove(obj) //提示的鼠標事件
{
obj.style.backgroundColor='#DDDDDD'
}
function mouseout(obj) //提示的鼠標事件
{
obj.style.backgroundColor='white'
}
function mouseclick(obj) //提示的鼠標事件
{
document.all.Google.value=obj.values;
event.cancelBubble=true; //點擊選中提示,所有提示不消失
}
function displayall()
{
document.getElementById('myend').style.display='none';
}
6,表單的html首頁內容裏,加入以下代碼:"<script type=\"text/javascript\" src=\"jquery.js\"></script>",調用jQuery,次jQuery的js文件存儲在該數據庫的共享資源的文件當中。
7,創建代理,命名爲GoogleSearch,代碼如下:
Sub Initialize
Dim Session AsNew NotesSession
Dim db As NotesDatabase
Dim view As NotesView
Dim doc As NotesDocument
Dim cgi As NotesDocument
Dim docs As NotesDocumentCollection
Set cgi = Session.DocumentContext
Set db=Session.CurrentDatabase
Dim key AsString
key= GetParameter("keyword",cgi.GetItemValue("Query_String_Decoded")(0)) 'GetParameter函數的作用是獲取url中&keyword=的值
Set view = db.GetView("視圖名")
Dim formalue AsString
formalue={Form ="文檔的表單名"& @contains(name;"}+Trim(key)+{")} 'name爲查詢文檔的一個域
Set docs=db.Search(formalue,Nothing,0)
Print "Content-type: text/xml"'輸出xml文件的表頭
Print |<?xml version="1.0" encoding="GB2312" ?> |
Print "<result>"
If docs.Count<>0Then
Dim words() AsString
Dim i AsInteger
i=1
Set doc=docs.GetFirstDocument()
WhileNot doc IsNothing
words(i)=doc.name(0) 'name爲查詢文檔的一個域,此處可根據具體情況而定
i=i+1
Set doc=docs.GetNextDocument(doc)
Wend
Dim x As Variant
x=Arrayunique(words) '去掉數組中的重複值
Dim cols As NotesDocumentCollection
Dim malue AsString
Forall one In x
If one<>""Then
malue={Form ="文檔的表單名"& @contains(name;"}+Trim(one)+{")}
Set cols=db.Search(malue,Nothing,0)
Print "<first>"'print出xml文件的格式,格式可根據自己的喜好更改
Print one
Print "</first>"
Print "<second>"
Print Cstr(cols.Count)
Print "</second>"
EndIf
End Forall
Else
Print "<first>"
Print key
Print "</first>"
Print "<second>"
Print "0"
Print "</second>"
EndIf
Print "</result>"
End Sub
上面的代碼只是爲了粗略的實現Google搜索提示的效果,在真正的使用這種效果的時候代理查詢要更復雜,前臺展示的效果要更細膩,由於代碼寫的比較倉促,以致根本來不及估計編碼規範,看得懂就好。