Domino下实现仿Google搜索提示效果

随着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：

，用于放置搜索提示内容
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 {
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首页内容里，加入以下代码：""，调用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 ""
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 ""'print出xml文件的格式，格式可根据自己的喜好更改
   Print one
   Print ""
   Print ""
   Print Cstr(cols.Count)
   Print ""
EndIf
End Forall
Else
 Print ""
 Print key
 Print ""
 Print ""
 Print "0"
 Print ""
EndIf
Print ""
End Sub

上面的代码只是为了粗略的实现Google搜索提示的效果，在真正的使用这种效果的时候代理查询要更复杂，前台展示的效果要更细腻，由于代码写的比较仓促，以致根本来不及估计编码规范，看得懂就好。