DWR实现模拟Google搜索效果实现原理及代码
2024-05-06 14:19:44
供稿：网友
代码如下:
<!-- 模拟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对象添加去除左右空格方法
*/
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();
