春节了，写个类似谷歌的文本框提示功能

auto.html如下：

<! 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"   />
< title > 无标题文档 </ title >
< script  type ="text/javascript" > ...
    function formsub()
...{
    if($("fullsms").value==""||$("fullsms").value=="请输入商家名或关键字") 
    ...{
        alert("请输入您要搜索的关键字");
        $("fullsms").focus();
        return false;
    }
    else
    formindex.submit();
}
function $(id)
...{
    return document.getElementById(id);
}
function txtfocus()
...{
    if($("fullsms").value == "请输入商家名或关键字")
    ...{
        $("fullsms").value="";
        $("fullsms").style.color='#222222';
    }
}
function txtblur()
...{
    
    if($("fullsms").value=="") 
    ...{
        $("fullsms").style.color='#cccccc';
        $("fullsms").value="请输入商家名或关键字";
    }
    //$("Layer2").style.visibility = "hidden";
}
function chk()
...{
    if(window.event.keyCode==13)
    ...{
        formsub();
    }
}
function hidauto()
...{
    if(window.focus())
    ...{
        $("Layer2").style.visibility = "hidden";
    }
}
function auto()
...{
    xmlhttp = xmlHttp();
    if($("fullsms").value!="" && $("fullsms").value !="请输入商家名或关键字")
    ...{
        var fullsms = $("fullsms").value;
        xmlhttp.onreadystatechange = function ()...{
        if(xmlhttp.readyState ==4)
        ...{
            if(xmlhttp.status == 200)
            ...{
                var txt = xmlhttp.responseText;
                
                $("Layer2").innerHTML = txt;
                if(txt != "")...{
                    $("Layer2").style.visibility = "visible";
                    }
            }
        }
        };
        xmlhttp.open("post","iAuto.asp",true);
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;chartset=utf-8');
        xmlhttp.send('fullsms='+fullsms);
    }
    else
    ...{
        $("Layer2").style.visibility = "hidden";
    }
}
function xmlHttp()
...{
    xmlhttp = false;
    xmlhttpObj = ["MSXML2.XmlHttp.5.0","MSXML2.XmlHttp.4.0","MSXML2.XmlHttp.3.0","MSXML2.XmlHttp","Microsoft.XmlHttp"];
    
    if(window.XMLHttpRequest)
    ...{
        xmlhttp = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    ...{
        for(i=0;i<xmlhttpObj.length;i++)    
        ...{
            xmlhttp = new ActiveXObject(xmlhttpObj[i]);
            if(xmlhttp)
            ...{
                break;    
            }
        }
    }
    else
    ...{
        alert("暂时不能创建XMLHttpRequest对象");
    }
    return xmlhttp?xmlhttp:false;
}
function getCur()
...{
    if($("Layer2").childNodes.length>0)
    ...{
        var iDiff = $("Layer2").childNodes[0].childNodes[0].rows;//记录
        for(i=0;i<iDiff.length;i++)
        ...{
            if(iDiff[i].bgColor == "#e3e3e3")
             return i;
        }
    }
    return null;
}
function removeColor()
...{
    if($("Layer2").childNodes.length>0)
    ...{
        var iDiff = $("Layer2").childNodes[0].childNodes[0].rows;//记录
        for(i=0;i<iDiff.length;i++)
        ...{
            if(iDiff[i].bgColor == "#e3e3e3")
             iDiff[i].bgColor = "#ffffff";
        }
    }
}
//
function goRecord(s)
...{    

var autocur = getCur() != null?getCur():-1;
    if($("Layer2").childNodes.length>0)
    ...{
        var iDiff = $("Layer2").childNodes[0].childNodes[0].rows;//记录
        if(s==40&&iDiff.length>0)//下箭头
        ...{
            autocur = autocur>=iDiff.length||autocur<-1?-1:autocur;
            autocur++;
            if(autocur < iDiff.length)
            ...{
                if(autocur >0)
                    iDiff[autocur-1].bgColor="#ffffff";//"#E3E3E3";
                iDiff[autocur].bgColor="#E3E3E3";//"#E3E3E3";
                $("fullsms").value = iDiff[autocur].cells[0].innerText;
            }
            else
            ...{
                iDiff[autocur-1].bgColor="#ffffff";
            }
        }
        else if(s==38&&iDiff.length>0)
        ...{
            
            autocur = (autocur<1||autocur>iDiff.length)?iDiff.length:autocur;
            autocur--;
            
            if(autocur < iDiff.length&&autocur>-1)
            ...{
                if(typeof(iDiff[autocur+1]) != "undefined")
                    iDiff[autocur+1].bgColor="#ffffff";//"#E3E3E3";
                else
                    iDiff[0].bgColor="#ffffff";//"#E3E3E3";
                iDiff[autocur].bgColor="#E3E3E3";//"#E3E3E3";
                
                $("fullsms").value = iDiff[autocur].cells[0].innerText;
                
            }
        }
    }
}
function rClick(wd,urlwd)
...{
    $("Layer2").style.visibility = "hidden";
    $("fullsms").value = wd;
    location.href="http://www.baidu.com/?fullsms="+urlwd+"&act=acts";
}
</ script >
< style  type ="text/css" > ...
#Layer1 {...}{
    position:absolute;
    width:1px;
    height:1px;
    z-index:1;
}
#Layer2 {...}{
    position:absolute;
    width:290px;
    z-index:1;
    left: -295px;
    top: 25px;
    border:1px solid #CCCCCC;
    background-color:#FFFFFF;
    line-height:17px;
    visibility:hidden;
}
</ style >
</ head >

< body >
< form  action ="/http://www.baidu.com/"  method ="get"  name ="formindex"  onSubmit ="return formsub()" >
< input  name ="fullsms"  type ="text"  style ="width:290px; color:#cccccc;"  maxlength ="250"  height ="25"  value ="请输入商家名或关键字"  autocomplete ="off"  id ="fullsms"  onBlur ="txtblur();"  onFocus ="txtfocus()"  onKeyUp ="if(window.event.keyCode != 40 && window.event.keyCode!=38&&window.event.keyCode!=13) auto(); "  onKeyDown ="goRecord(window.event.keyCode);"  onMouseMove ="removeColor()" >< div  id ="Layer1" >< div  id ="Layer2" ></ div >
         </ div >
</ form >
</ body >
</ html >

 iAuto.asp如下：

 

< table  width ="100%"  border ="0"  cellspacing ="0"  cellpadding ="0" >
< tbody >
   < tr  style ="cursor:pointer"  height ="17"  onmouseover ="this.bgColor='#E3E3E3';this.style.color='#ffffff';"  onmouseout ="this.bgColor='#ffffff';this.style.color='#333333';"  onclick ="rClick('china','china')" >
     < td  width ="73%"  style ="font-size:12px; color:#333333;" > china </ td >
     < td  width ="27%"  style ="font-size:12px; color:#009900;"  align ="right" > china
    </ td >
   </ tr >
    < tr  style ="cursor:pointer"  height ="17"  onmouseover ="this.bgColor='#E3E3E3';this.style.color='#ffffff';"  onmouseout ="this.bgColor='#ffffff';this.style.color='#333333';"  onclick ="rClick('china','china')" >
     < td  width ="73%"  style ="font-size:12px; color:#333333;" > cdfdf </ td >
     < td  width ="27%"  style ="font-size:12px; color:#009900;"  align ="right" > cdfsf
    </ td >
   </ tr >
    < tr  style ="cursor:pointer"  height ="17"  onmouseover ="this.bgColor='#E3E3E3';this.style.color='#ffffff';"  onmouseout ="this.bgColor='#ffffff';this.style.color='#333333';"  onclick ="rClick('china','china')" >
     < td  width ="73%"  style ="font-size:12px; color:#333333;" > crtrtr </ td >
     < td  width ="27%"  style ="font-size:12px; color:#009900;"  align ="right" > cdfsdfd
    </ td >
   </ tr >
   </ tbody >
</ table >
< div  align ="right"  onclick ="$('Layer2').style.display = 'hidden'"  style ="font-size:14px; color:#FF0000; cursor:pointer;"  title ="china" > &times;&nbsp; </ div >

代码有点乱，但是能用。以后有时间再修改下。

在文本框里输入c,就会出来c打头的东西了。