php+ajax 仿google 下拉框代码三

<!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也有同样问题,所以。。。 :)。

时间: 2024-12-03 10:14:25

php+ajax 仿google 下拉框代码三的相关文章

php+ajax 仿google 下拉框代码一

php+ajax 仿google 下拉框代码一,这里php代码 <?php header('Content-Type:text/html;charset=utf-8'); require('../../admin/include/db_conf.php'); if($_POST['add']){     $keyword = trim($_POST['keyword']);     if(empty($keyword)){         header("LOCATION: suggest

jquery 仿google下拉框可选多选效果

<!doctype html> <html> <head> <meta charset="gbk"> <title>选择标签至文本域效果,可多选/可过滤重复/可限制个数@mr.think</title> <style> /*reset css教程*/ body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,5b8b4f53} div,h2,p,i

数据-ajax 根据一个下拉框的值的不同 另一个下拉框对应显示的值也不同

问题描述 ajax 根据一个下拉框的值的不同 另一个下拉框对应显示的值也不同 图片就是这样的,项目的类别有商户和银行两种,我要根据选择商户还是银行,让下边对应的选择已有商户 的下拉框中显示不同的数据,数据都需要通过后台去数据库里查的. 这个是不是要ajax啊?谁能告诉告诉我怎么写 .急急急 ..在线等好心人..... 解决方案 html代码 <tr> <td style="width:15%"> 一级 </td> <td style="

模拟交换机查表功能-请大神补充里面的下拉框代码,主代码已有,自己电脑运行老是报错,谢谢啦!

问题描述 请大神补充里面的下拉框代码,主代码已有,自己电脑运行老是报错,谢谢啦! 请大神做好打包发q 1125485579@qq.com 这是文件链接http://download.csdn.net/detail/liu10231217/9326519 解决方案 50c就够找苦力,留下个邮箱坐等代码送上门.就算有人愿意帮你,你文件链接都懒得贴也是醉了. 解决方案二: 你还留什么q,干脆留个银行卡账户,看看有没有好心人给你捐点得了. 解决方案三: 没办法思密达!表示对自己这个专业很是头疼 解决方案

王宝臣:百度下拉框的三点意义心得体会

用户体验可以表现在任何地方,在站长圈说的用户体验大多都是在说网站的某一个细节,比如我们经常观看的logo是在网页的头部的左上角区域(个性页 面除外),这其实也是归结于用户群体的一个使用习惯,那么言归正传百度的下拉框其实也是百度产品在提高他们的用户体验而做的一个细节调整,当某一个时间段 搜索某一特定词汇的人数比较多的时候自然的百度搜索机器就会帮助用户识别并且提示跟搜索词汇前几个字有关系的那些词汇进行提示,如图:   你会发现当我在百度搜索框中输入:王宝的时候近期的一些搜索包括知名草根电影明星-王宝

asp+ajax仿google搜索提示效果代码_应用技巧

对于更完整的代码可以参考,这个是支持数据库的版本.经过编辑测试.Asp+Ajax仿google搜索提示效果 数据库版需要修改的地方有 复制代码 代码如下: javascript.js var url="ajax.asp"; //后台地址 var time_delayajax=300; //搜索延迟 var time_delayupdown=100; //方向键延迟 obj_div.style.top = (xtop + 20) + "px"; //20差不多是输入框

asp+ajax仿google搜索提示效果代码

对于更完整的代码可以参考,这个是支持数据库的版本.经过脚本之家编辑测试. Asp+Ajax仿google搜索提示效果 数据库版 需要修改的地方有 复制代码 代码如下: javascript.js var url="ajax.asp"; //后台地址 var time_delayajax=300; //搜索延迟 var time_delayupdown=100; //方向键延迟 obj_div.style.top = (xtop + 20) + "px"; //20差

ajax完美解决 下拉框连动

ajax|解决|下拉 <select id="Agent" name="Agent"></select> 接下来当然是定义XmlHttpRequest对象.    var xmlhttp;function CreateXmlHttp()   {     //非IE浏览器创建XmlHttpRequest对象    if(window.XmlHttpRequest)    {     xmlhttp=new XmlHttpRequest();  

AJAX实现联动下拉框的问题(求助~~~)

问题描述 三级联动下拉框的问题.因为要求不能刷新页面,而且下拉框的内容都是在数据库,动态的,所以要求用AJAX.下拉框数据通过AJAX取得和联动方面没有问题.现在的问题是,在页面提交的时候会出错.比如:初期:DDL1有一个空项和一项Level1,DDL2有一个空项画面上,DDL1选择Level1,AJAX取得对应的Level21和Level22,通过JavaScript添加到DDL2上面.如果选择Level21或者Level22,然后点击画面上面的一个提交按钮,页面就会报错.如果不对DDL2进行