google suggest的实现

77 阅读 0 评论 51 点赞

我是靠谱客的博主鲜艳寒风，最近开发中收集的这篇文章主要介绍google suggest的实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

自己想实现一个google suggest，以下是参考以为牛人的文章，加了一些自己的东西终于调通啦，以为是源码，希望对大家有所帮助，后台传回的为json的字符串，大体思路为：文本框监听键盘事件、触发事件、提取参数、根据文本框的位置创建div，向后退发起请求，后台发挥数据，前台解析，生成列表，这里面是table，再把table写到创建的div中，接着是监听用户键盘或鼠标事件，给文本框赋值，这里有个问题就是浏览器的兼容性问题，这里从网上搜的，浏览器都能兼容。

// JavaScript Document

//取得控件位置
var list;
function getPosition( obj )
{
var top = 0,left = 0;
do
{
top += obj.offsetTop;
left += obj.offsetLeft;
}
while ( obj = obj.offsetParent );
var arr = new Array();
arr[0] = top;
arr[1] = left;
return arr;
}

//创建层
function createMenu( textBox)
{
if( document.getElementById("menuid") == null )
{
var left_new=getPosition( textBox )[1]
var top_new=getPosition( textBox )[0];
var newControl = document.createElement("div"); //创建层
newControl.id = "menuid";
document.body.appendChild( newControl );
newControl.style.position = "absolute";
newControl.style.border = "solid 1px #000000";
newControl.style.backgroundColor = "#FFFFFF";
newControl.style.width = textBox.clientWidth + "px"; //绝对宽度
newControl.style.left = left_new + "px"; //位置
newControl.style.top = (top_new + textBox.clientHeight + 8) + "px"; //注意，将此高度加2是为了解决JS出现的非自然因素…
return newControl;
}
else
return document.getElementById("menuid");
}

//创建层主体
function createMenuBody( arr )
{
var result = "";
var j = 0;
list = arr;
//最多显示十行数据

if(arr.length > 10)
{
j = 10;
}
else
{
j = arr.length;
}

for ( var i = 0; i < j; i++ ) //循环创建层的主体
result += "<table border="0" cellpadding="2" cellspacing="0" id="menuItem"+(i+1)+"" οnmοuseοver="forceMenuItem( "+(i+1)+");" width="100%" οnclick="givNumberRemove("+i+")"><tr><td align="left">" + arr[i].name + "</td><td align="right">"+ arr[i].address+"</td></tr></table>";

return result;
}


//捕获键盘事件
function keyDown(e)
{
var keyNumber = 0,e=e||event;
keyNumber = e.keyCode||e.which||e.charCode;
if(keyNumber =='40') //向下
{ $("#mapKey").unbind("keyup");
if(menuFocusIndex == 10)
return true;
else if (menuFocusIndex == 0) //当焦点在文本框中间时，按向下跳到第一个主体。
{
forceMenuItem( 1 );
givNumber( 0 );
}
else
{
forceMenuItem( menuFocusIndex+1 ); //焦点增加1
givNumber(menuFocusIndex-1);
}

}
else if(keyNumber == '38')//向上
{ $("#mapKey").unbind("keyup");
if(menuFocusIndex == 1)
{
forceMenuItem(menuFocusIndex-1); //当焦点在第一个主体时，按向上让它回到文本框。
}else if (menuFocusIndex == 0)
{
forceMenuItem(list.length);
givNumber(list.length);
}

else
{
forceMenuItem(menuFocusIndex-1); //焦点减少1

}
}
else if(keyNumber == '13')
{
var menuid = document.getElementById("menuid");
document.body.removeChild(menuid);
menuFocusIndex = 0;
}else{
$("#mapKey").bind("keyup",function(){suggest();});
}


}

document.onkeydown = keyDown;
function givNumberRemove(index)
{
givNumber(index);
removeSuggest();
}

function givNumber(index)
{
document.getElementById("mapKey").value = list[index].name;
document.getElementById("mapKey").focus();
}

function removeSuggest()
{
var menuid = document.getElementById("menuid");
document.body.removeChild(menuid);
$("#mapKey").bind("keyup",function(){suggest();});
menuFocusIndex = 0;

}

var menuFocusIndex = 0;
function forceMenuItem(index){

lastMenuItem = document.getElementById( "menuItem" + menuFocusIndex )
if ( lastMenuItem != null )
{
//将上一个变白
lastMenuItem.style.backgroundColor="white";
lastMenuItem.style.color="#000000";
}

var menuItem = document.getElementById( "menuItem" + index );
if ( menuItem == null )
{
document.getElementById("mapKey").focus();
menuFocusIndex = 0;
}
else
{
menuItem.style.backgroundColor = "#5555CC";
menuItem.style.color = "#FFFFFF";
menuFocusIndex = index;
}


}

//suggest

function suggest()
{
var name = $("#mapKey").val();
if(name == "")
{
var menuid = document.getElementById("menuid");
if(menuid)
document.body.removeChild(menuid);
menuFocusIndex = 0;
return;
}
$.ajax({
type: "post",
url: "suggest.php",
data: {name: name},
stamp : Math.random(),
success: function(data)
{

var restaurant = document.getElementById("mapKey");
var myobj=JSON.parse(data);
if(myobj.length > 0)
{
var menuid = createMenu(restaurant);
var result = createMenuBody(myobj);
menuid.innerHTML = result;
}

}
});

}