php ajax 返回json数据|php+ajax 仿google 下拉框代码三

更新时间:2015-08-03    来源:Google    手机版     字体:

【www.bbyears.com--Google】






无标题文档
<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>






没有迟延:






迟延100ms:



最后的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.bbyears.com/seo/17016.html

猜你感兴趣