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：<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 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搜索提示的效果，在真正的使用这种效果的时候代理查询要更复杂，前台展示的效果要更细腻，由于代码写的比较仓促，以致根本来不及估计编码规范，看得懂就好。