关于自动显示的问题

ajax 异步实现表单 onblur 触发

用jquery 。ajax很好用的

ajax异步与服务器交互,取回数据后用JS控制

lz去查ajax的调用方式就知道了!------------------测试哥的签名--------------------------
哥默默的低下头,不是哥修养好,而是哥在找砖头!(哥又回来了)
--------------------------------------------------------

Google Suggest自动下拉完成功能
效果图类似JS代码文件共9K多，如果打乱格式应该可以压到6K左右吧。
本程序共三个计时器：输入框onblur后列表隐藏计时、用户按键计时、数据发送后等待结果计时。
— 因为没有任何参考，也没做任何调查，因此所设定的默认时间都是凭个人感觉，如：发送请求后延迟时间隐藏列表项，是在个人感觉保证列表没有闪动的前提下服务器能够返回数据的差不多时间：）。调用：
后台数据以 [['关键字符','估计数量'], ['关键字符','估计数量'], ...] 格式输出。
页面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也有同样问题，所以：）。suggest.php
[code=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.html");
        exit;
    }
    $db = db_connect();
    $db->query("set names 'gb2312'");
    $sql = "select*from suggest where keyword = '$keyword'";
    if($db->query($sql)->num_rows>0){
        header("LOCATION: suggest.html");
        exit;
    }
    $num = rand(15, 2008);
    $sql = "insert into suggest values(NULL, '$keyword', $num)";
    $db->query($sql);
    $db = NULL;
    header("LOCATION: suggest.html");
    exit;
}
$keyword = $_POST['keyword'];
if(empty($keyword)){
    echo 'null';
    exit;
}
$db = db_connect();
$db->query("set names 'utf8'");
$sql = "select *from suggest where keyword REGEXP '^$keyword'  order by id desc limit 0, 15";
$result = $db->query($sql);
if($result->num_rows<1){
    echo 'null';
    exit;
}
$arr = array();
while($rows=$result->fetch_object()){
    $keyword = $rows->keyword;
    $arr[]="['$keyword', '$rows->num ".iconv('gb2312','utf-8','结果')."']";
}
$arr = '['.implode(',',$arr).']';
echo $arr;
?>[code]
suggest表：
CREATE TABLE `suggest` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `keyword` varchar(50) NOT NULL,
  `num` int(10) unsigned NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=gb2312 AUTO_INCREMENT=59 ;
JS代码：[php]

/*
    ****************************
    *** http://www.hansir.cn ***
    ****************************
*/
String.prototype.ltrim = function(){
    return this.replace(/^\s*(.+?)$/,'$1');
}
//这里引用prototype的五个方法
function $(){return document.getElementById(arguments[0]);}
Object.extend = function(destination, source){
    for(property in source) destination[property] = source[property];
    return destination;
}
function $A(iterable) {
    var results = [];
    for (var i = 0; i < iterable.length; i++)results.push(iterable);
    return results;
}
Function.prototype.bindAsEventListener = function(object) {
    var __method = this;
    return function(event) {
        return __method.call(object, event || window.event);
    }
}
Function.prototype.bind = function() {
    var __method = this, args = $A(arguments), object = args.shift();
    return function() {
        return __method.apply(object, args.concat($A(arguments)));
    }
}
var hansir = {
    url: 'http://www.hansir.cn'
}
hansir.AjAx = function(){this.initialize.apply(this, arguments);}
hansir.AjAx.prototype = {
    initialize: function(complete, method, url){
        this.complete = complete;
        this.method      = method || 'post';
        this.url      = url;
        if (this.method == 'get') this.url += (this.url.match(/\?/) ? '&' : '?');
    },
    xmlHttp: function(){
        var xmlHttp;
        if(window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();
        else if(window.ActiveXObject)
            try{
                xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
            }catch(errr){
                xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
            }
        return xmlHttp;
  },
  request: function(parameters){
    var xmlHttp = this.xmlHttp();
    var send_val = null;
    this.method=='get' ? this.url += parameters : send_val = parameters;
    xmlHttp.open(this.method, this.url, true);
    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
    xmlHttp.onreadystatechange = this.ready_handler.bind(this, xmlHttp);
    xmlHttp.send(send_val);
  },
  ready_handler: function(xmlHttp){
    if(xmlHttp.readyState == 4){
        if(this.success(xmlHttp)){
            this.complete.load_data(xmlHttp);
        }
    }
  },
  success: function(xmlHttp){return xmlHttp.status == 0 || xmlHttp.status >= 200 && xmlHttp.status < 300}
}

太长了，直接给网址算了：Google Suggest自动下拉完成功能（PHP实现）

调试易

关于自动显示的问题

解决方案 »