php+ajax 仿google 下拉框代码三
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
*{font: 12px '宋体'}
.tab_suggest{border:1px solid #333; background:#fff; position:absolute; z-index:101; visibility: hidden;}
.tab_suggest th, .tab_suggest td{font:12px '宋体'; font-weight:normal; height:17px; text-align:left; line-height:17px; padding:2px 3px; white-space:nowrap; cursor: default;}
.tab_suggest td{color:#008000; text-align:right;}
.tab_suggest tr.cur{background:#36c; color:#fff}
.tab_suggest tr.cur td{color:#fff}
</style>
<title>无标题文档</title>
<script type="text/javascript" src="js/suggest.js"></script>
<script type="text/javascript">
window.onload=function(){
var mySuggest = new hansir.TextSuggest();
mySuggest.add_suggest('textSuggest', 'suggest.php', 'post');
mySuggest.add_suggest('textSuggest2', 'suggest.php', 'post', 100);
$('textSuggest').focus();
}
</script>
</head>
<body>
<br /><br />
<form action="suggest.php" method="post"><input type="hidden" name="add" value="add" />
没有迟延：<input type="text" id="textSuggest" name="keyword" style="width:300px;" autocomplete="off"/>
<input type="submit" value="提 交" />
</form>
<br /><br /><br />
<form action="suggest.php" method="post"><input type="hidden" name="add" value="add" />
迟延100ms：<input type="text" id="textSuggest2" name="keyword" style="width:300px;" autocomplete="off"/>
<input type="submit" value="提 交" />
</form>
</body>
</html>最后的html文件.
调用：
后台数据以 [['关键字符','估计数量'], ['关键字符','估计数量'], ...] 格式输出。
页面onload后调用（因为有body.appendChild方法）
var mySuggest = new hansir.TextSuggest();
mySuggest.add_suggest(inp, url, method, defer, defer2);
除了前两项必填，后三项都是可选的
inp ：输入框ID名。
url ：ajax请求的后台服务器页面地址。
method ：发送方试 get或post，默认post。
defer ：按键计时，即用户输入字符多久后请求服务器，默认不计时，用户输入字符后立即发送。
defer2 ：服务器返回结果计时，即服务器发送请求后多长时间没有返回数据，列表自动隐藏，默认200ms。
测试说明：
1、数据库存放的是临时数据。
2、可以输入“中华人民共和国”，“中”，”蓝色“ 测试。
3、可以输入一些其他的自定义数据，提交存到表里，然后就可以用刚刚提交的数据测试。
4、我的服务器网速慢，可能有个别卡的现象。
5、迟延：用户输入字符多久后请求服务器，照顾输入快的用户 ：）
— 如果服务器速度够快可以考虑迟延,如果慢就无所谓了,反正是一个请求完成才会进行下一个 ：）
已知缺陷：
1、下拉提示框位置问题：因为是以BODY为参考，所以位置会随body大小改变(下拉列表显示时拖动窗口大小可看效果)。
— 解决方法：真正用时可以根据input的父元素定位（这样还可以省些资源，即不毕每次显示下拉框都计算位置）。
2、用五笔输入法在FF下输入完成后上下方向键不好使要切换一下输入法才可以，拼音则正常。
— 解决方法：google也有同样问题，所以。。。 ：）。
教程地址：http://www.phprm.com/code/5ac4ba7b15ad6b93ff6fa69c241702df.html
欢迎转载！但请带上文章地址^^