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函数
}
}
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搜索提示的效果,在真正的使用这种效果的时候代理查询要更复杂,前台展示的效果要更细腻,由于代码写的比较仓促,以致根本来不及估计编码规范,看得懂就好。
转载于:https://blog.51cto.com/sysmw/1242217
Domino下实现仿Google搜索提示效果相关推荐
- ajax suggest,ajax Suggest类似google的搜索提示效果
ajax Suggest类似google的搜索提示效果 2020-11-11 14:21:34 阅读数 375 收藏 0 实现: 有了上面两句后,每个取了名的文本框会多出五个属性: 1.action ...
- android bilibili搜索框,仿bilibili搜索框效果(三句代码实现)
SearchDialog 仿bilibili搜索框效果(只需要三句话即可实现) 先看预览图(转换后有一点点失真): 前言 1,支持搜索历史(已经做了数据库存储了) 2,基本与bilibili的搜索效果 ...
- 仿bilibili搜索框效果
仿bilibili搜索框效果(只需要三句话即可实现) Usage With Gradle: compile 'com.wenwenwen888:searchbox:1.0.0' How to use ...
- 仿 bilibili 搜索框效果(三句代码实现)
SearchDialog 项目地址:wenwenwen888/SearchDialog 简介:仿 bilibili 搜索框效果(三句代码实现) 更多:作者 提 Bug 标签: 搜索-搜索框- ...
- php百度搜索框代码,基于jquery的仿百度搜索框效果代码_jquery
先看看整个的效果图: 图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码 页面: CSS: .autoSearchText{ border:solid 1px #CFCFCF; he ...
- 搜索提示的实现(仿百度):附源码和在线demo
这篇文章是我转载过来的,我现在做的搜索引擎项目也做了一个基于Jquery做的自动提示功能,这里就不贴了,下面我给出一个我转载的文章分享给大家,喜欢的拿去吧! 智能搜索提示的功能大家都用过,百度搜索的时 ...
- ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)...
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 * { margin: 0px; padding: 0px; } #wrapper { height: 100% ...
- 《iVX 高仿美团APP制作移动端完整项目》02 搜索、搜索提示及类别需求分析思路及制作流程
点击整个专栏查看其它系列文章 (系列文章更新中-):<iVX 高仿美团APP制作移动端完整项目> 项目界面预览: 一.搜索制作 在上一节中我们完成了标题头的制作,接下来我们查看如何制作搜索 ...
- ajax下拉列表模糊,JS仿百度自动下拉框模糊匹配提示
实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 js/jQuery实现类似百度搜索功能 #container { position: absolute; left: ...
最新文章
- GNN教程:GraghSAGE算法细节详解!
- Mysql学习笔记【原创】
- C语言博客作业--嵌套循环
- 【代码笔记】Web-JavaScript-JavaScript调试
- 【机器视觉】 repeat算子
- 乐观锁与悲观锁深入学习
- 最全、最详细的配置jdk十步法!
- super与this关键字的区别
- VMware 9 安装 Mac OS X 10.8 Mountain Lion 图文全程
- POJ 3613 Cow Relays (floyd + 矩阵高速幂)
- 39个工具,120种组合深度评估 (转录组分析工具哪家强)
- 基于CSE的微服务架构实践-Spring Cloud技术栈选型
- java冒泡法排序实例_Java冒泡法排序实例
- Python生成器 yield
- Atitit enhance dev effect提升开发效率的十大原理与方法v3 u66.docx Atitit enhance dev effect提升开发效率的十大原理与方法v2 u66.do
- Atitit bootsAtitit bootstrap布局 栅格.docx 目录 1. 简述container与container-fluid的区别	1 1.1.1. 在bootstrap中的布局
- overleaf中使用orcidlink给 ieee access加ORCID时遇到的tikz问题
- 交叉编译JRTPLib库
- j和jk是有区别的_科普向,大家都说jk,jk是什么意思呢?
- 有太多工作要做,传蚂蚁集团IPO可能推迟至2022年
热门文章
- 大数据之-Hadoop3.x_MapReduce_自定义序列化步骤---大数据之hadoop3.x工作笔记0095
- navicat工具查看MySQL数据库_表占用容量_占用空间是多少MB---Linux工作笔记048
- 大数据_Flink_流式处理_简介_认识一下什么是BI中的ETL---Flink工作笔记0005
- Vue计算属性的_set与get方法_实现双向数据传递---vue工作笔记0006
- SpringCloud工作笔记067---消息推送_推送视频_推送图片_在通知栏里显示图片视频_自定义点击消息后的动作
- SpringCloud工作笔记041---com.fasterxml.jackson.databind.ObjectMapper的使用
- CodeMirror动态加载和表单提交
- 随想录(用python开发网站)
- canvas 擦除动画_帧动画的多种实现方式与性能对比
- java 拷贝大文件_java高效实现大文件拷贝功能