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