<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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也有同样问题,所以。。。 :)。