随着Ajax的运用越来越广泛,越来越多的用户体验被提升,在Domino中应用Ajax实现Google搜索提示效果,在用户的使用过程中也是一种很实用的体验,下面将详细介绍下实现的思路和方法,仅供参考,以下代码在Domino6.5和ie 6中正常运行通过,效果如下图。
1,在表单中创建字段(域),且命名为Google,并在域的 onkeyup时间中加入以下代码:
3,在表单的前面加入以下代码,并内置html:
5,在表单的jsheader;里面加入以下代码:
7,创建代理,命名为GoogleSearch,代码如下:
上面的代码只是为了粗略的实现Google搜索提示的效果,在真正的使用这种效果的时候代理查询要更复杂,前台展示的效果要更细腻,由于代码写的比较仓促,以致根本来不及估计编码规范,看得懂就好。
1,在表单中创建字段(域),且命名为Google,并在域的 onkeyup时间中加入以下代码:
Code
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>,用于放置搜索提示内容
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函数
}
}
3,在表单的前面加入以下代码,并内置html:
<
script
>
var asKey = "" ;
var currentSelect =- 1 ;
document.onkeydown = viewEvent;
document.onclick = displayall; // 单击页面其他地方时,提示消失,与event.cancelBubble=true结合使用
</ script >
4,在Google域的onclick时间中加入以下代码:event.cancelBubble=true; //点击该域时提示不消失
var asKey = "" ;
var currentSelect =- 1 ;
document.onkeydown = viewEvent;
document.onclick = displayall; // 单击页面其他地方时,提示消失,与event.cancelBubble=true结合使用
</ script >
5,在表单的jsheader;里面加入以下代码:
Code
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文件存储在该数据库的共享资源的文件当中。
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';
}
7,创建代理,命名为GoogleSearch,代码如下:
Code
Sub Initialize
Dim Session As New 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 As String
key= GetParameter("keyword",cgi.GetItemValue("Query_String_Decoded")(0)) 'GetParameter函数的作用是获取url中&keyword=的值
Set view = db.GetView("视图名")
Dim formalue As String
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<>0 Then
Dim words() As String
Dim i As Integer
i=1
Set doc=docs.GetFirstDocument()
While Not doc Is Nothing
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 As String
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>"
End If
End Forall
Else
Print "<first>"
Print key
Print "</first>"
Print "<second>"
Print "0"
Print "</second>"
End If
Print "</result>"
End Sub
Sub Initialize
Dim Session As New 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 As String
key= GetParameter("keyword",cgi.GetItemValue("Query_String_Decoded")(0)) 'GetParameter函数的作用是获取url中&keyword=的值
Set view = db.GetView("视图名")
Dim formalue As String
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<>0 Then
Dim words() As String
Dim i As Integer
i=1
Set doc=docs.GetFirstDocument()
While Not doc Is Nothing
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 As String
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>"
End If
End Forall
Else
Print "<first>"
Print key
Print "</first>"
Print "<second>"
Print "0"
Print "</second>"
End If
Print "</result>"
End Sub
上面的代码只是为了粗略的实现Google搜索提示的效果,在真正的使用这种效果的时候代理查询要更复杂,前台展示的效果要更细腻,由于代码写的比较仓促,以致根本来不及估计编码规范,看得懂就好。