【DWR】DWR实现模拟Google搜索效果实现原理及代码-模拟-Google搜索

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【DWR实现模拟Google搜索效果实现原理及代码】，下面是详细的讲解！

DWR实现模拟Google搜索效果实现原理及代码

<!-- 模拟google搜索 -->
<script type="text/javascript">

// 被选中的相似关键字背景颜色
var selectedBgColor="#CCCCCC";
// 未被选中的相似关键字背景颜色
var unselectedBgColor="#FFFFFF";
// 相似关键字列表框的边框
var listBorder="1 solid #000000";


// 上一次输入的关键字（用来判断关键字是否有改变，没有则不再去服务端重新获取提示关键字）
var oldKeyValue;
// 鼠标相对于提示关键字列表框的位置（0：提示框外面，1：提示框里面）
var mouseLocation=0;
// 当前选中的提示关键字索引（从0开始，等于-1表示没有被选中项）
var selectedKeyIndex=-1;
// 上一次选中的提示关键字索引（从0开始，等于-1表示没有上次被选中项）
var oldSelectedKeyIndex=-1;
// 提示关键字总数
var tdCount=0;


String.prototype.trim=function() {
var m=this.match(/^\s*(\S+(\s+\S+)*)\s*$/);
return (m==null) ? "" : m[1];
}

function initKeyListState(){
selectedKeyIndex=-1;
oldSelectedKeyIndex=-1;
tdCount=0;
}

function disSelectedOldKey(){
//判断说明：oldSelectedKeyIndex!=selectedKeyIndex
// 当只有一个相似关键字的时候，则不存在上一次选中和这次选中关键字，
// 只要第一次选中后，按向上或向下箭头都是选中。
if (oldSelectedKeyIndex!=-1&&oldSelectedKeyIndex!=selectedKeyIndex){
$('keyId'+ oldSelectedKeyIndex).bgColor=unselectedBgColor;
}
// 上一次选中项更新
oldSelectedKeyIndex=selectedKeyIndex;
}

function setSelectedKey(){
// $('keyId0')存在表示有相关提示关键字，不存在则不处理。
if($('keyId0')){
if (event.keyCode==38){
//------处理向上事件------
if (selectedKeyIndex==-1){
selectedKeyIndex=tdCount-1;
}else{
selectedKeyIndex=(selectedKeyIndex+tdCount-1)%tdCount;
}
$('keyId'+ selectedKeyIndex).bgColor=selectedBgColor;
disSelectedOldKey();
}else if (event.keyCode==40){
//------处理向下事件------
if (selectedKeyIndex==-1){
selectedKeyIndex=0;
}else{
selectedKeyIndex=(selectedKeyIndex+1)%tdCount;
}
$('keyId'+ selectedKeyIndex).bgColor=selectedBgColor;
disSelectedOldKey();
}else if (event.keyCode==13){
//------处理回车事件------
$('cond').value=$('keyId'+ selectedKeyIndex).innerText;
setCursorLast($('cond'));
// 隐藏提示关键字列表框
$('dropdownlistDiv').style.display='none';
}
}
}

function getConformKey(){
//得到输入的关键字
var keyValue=$('cond').value.trim();
// 如果这次的查询关键字和上次的一样，则不去服务器重新获取相似关键字列表。
if (keyValue!=oldKeyValue){
// 关键字为空则不去服务器获取相似关键字列表
if (keyValue==''){
DWRUtil.removeAllRows('showKeyList');
setDropListVisible(false);
initKeyListState();
}else{
//采用ajax异步模式获取相似关键字(这里的useraction,改成自己的action)
useraction.findByLike(keyValue,conformKeyCallback);
}
}
}

function conformKeyCallback(keyList){
DWRUtil.removeAllRows('showKeyList');
initKeyListState();
if (keyList.length>0){
// 生成相似关键字提示框
DWRUtil.addRows('showKeyList',keyList,cellFuncs, {
cellCreator:function(options) {
var td=document.createElement("td");
td.id='keyId' + tdCount++;
td.onmouseover=function (){selectedKeyIndex=parseInt(this.id.substring(5,td.id.length));this.bgColor=selectedBgColor;disSelectedOldKey();};
td.onclick=function (){
$('cond').value=this.innerText;
$('cond').focus();
setCursorLast($('cond'));
$('dropdownlistDiv').style.display='none';
};
return td;
},escapeHtml:false});
setDropListVisible(true);
}else{
setDropListVisible(false);
}
}

var cellFuncs=[
function(data) { return data.username; }
];

function setCursorLast(inputObj){
var inputRange=inputObj.createTextRange();
inputRange.collapse(true);
inputRange.moveStart('character',inputObj.value.length);
inputRange.select();
}

function createShowDiv(){
var showDiv=document.createElement("div");
showDiv.id="dropdownlistDiv";
with(showDiv.style){
position="absolute";
//层的绝对位置从这调整
left=parseInt($('cond').style.left.replace('px',''))+190;
top=parseInt($('cond').style.top.replace('px',''))+parseInt($('cond').style.height.replace('px',''))+28;
width=parseInt($('cond').style.width.replace('px',''));
border=listBorder;
zIndex="1";
display='none';
backgroundColor=unselectedBgColor;
}
showDiv.onmouseover=function (){mouseLocation=1;};
showDiv.onmouseout=function (){mouseLocation=0;};
//overflow设置滚动条
showDiv.innerHTML="<div style='width:100%;height:150px;overflow:auto;'><table border='0' style='width: 100%;height:20%;font-size: 12;color:#33CC00;'><tbody id='showKeyList' style='margin-left: 0;margin-right: 0;margin-bottom: 0;margin-top: 0;'></tbody></table></div>";
document.body.appendChild(showDiv);
initKeyListState();
}

function setDropListVisible(isDisplay){
if (mouseLocation==1){
return;
}
if (($('cond').value.trim()!='')&&(isDisplay==true)){
$('dropdownlistDiv').style.display='';
}
else{
$('dropdownlistDiv').style.display='none';
}
}
// 将创建相似关键字列表框方法附加到onload事件中
if (window.addEventListener){
window.addEventListener('load', createShowDiv, false);
}else if (window.attachEvent){
window.attachEvent('onload', createShowDiv);
}
</script>

关于DWR实现模拟Google搜索效果实现原理及代码的用户互动如下：

　　相关问题：如何用C++模拟实现Google File System的写机制，实...

　　答：http://wenku.baidu.com/link?url=LCpfXfZWI-SiAg9ZaaHgikqQLfB8OKlP1fjpNpX7bCn0pTT-P_7xKCdeBE1Ej2aGExOU-QO2umuS0odEayJtX72EJT-NBcXeM3IkFOMN1O_ >>详细

　　相关问题：求一个用Extjs+jsp做的类似百度或谷歌搜索功能的代码

　　答：旺道优化推广先锋，采用多台电脑互刷资源整合，构成独特的真实搜索数据。通过刷百度相关搜索软件，能在7天内，快速将我们要刷的词，刷到百度相关搜索词列表中。商业用户购买软件后，可待机操作，打开软件，添加好要刷的百度关键词，即可。 >>详细

　　相关问题：css和html语言模拟Google的字母logo,要完整的页面...

　　答：源码如下: Google Google >>详细