用jquery写的自动提示效果

在填写表单的时候为了让用户有更好的体验，有时需要根据用户的输入出现提示共用户选择，我这个就是根据输入的内容，从数据库取出相关内容以供选择，这样填写起来就方便快捷多了。

支持上下键和鼠标选择。

好了，废话少说，看演示。

自动提示演示

js代码

<script type="text/javascript">
var a_i;
function showGs(event){
if($.browser.msie){
     var keyStr=event.keyCode;
}
else var keyStr=event.which;
if(keyStr!=38&&keyStr!=40&&keyStr!=13){
    $("#ts").empty();
    var vsGsName=escape($("#sGsName").val());
    if(vsGsName!=""){
        $("#ts").html("正在加载...");
        $.post("s.asp",{sGsName:vsGsName},function(m){
            $("#ts").html(unescape(m));
            $("#ts>a").bind("click",vst);
            $("#ts").css("display","block");
            //初始化全局变量
            a_i=-1;
        });
    }
    else $("#ts").css("display","none");
}
else{
     //使用键盘上下键选择
     if($("#ts").css("display")=="block"){
         //得到选择列表的长度
         var aLen=$("#ts>a").length;
         var _aLen=Number(aLen)-1;
         //按下键盘向下方向键
         if(keyStr==38){
             if(a_i>=0&&a_i<=_aLen) $("#ts>a").get(a_i).style.backgroundColor="";
             a_i=Number(a_i)-1;
             if(a_i<0) a_i=_aLen;
             $("#ts>a").get(a_i).style.backgroundColor="#CCCCCC";
         }
         //按下键盘的向上方向键
         else if(keyStr==40){
             if(a_i>=0&&a_i<=_aLen) $("#ts>a").get(a_i).style.backgroundColor="";
             a_i=Number(a_i)+1;
             if(a_i>=aLen) a_i=0;
             $("#ts>a").get(a_i).style.backgroundColor="#CCCCCC";
         }
         //按下回车键
         else if(keyStr==13){
             var entLiText=$("#ts>a").get(a_i).innerHTML;
             $("#sGsName").val(entLiText);
             $("#ts").css("display","none");
         }
    }
}
}

function vst(){
    var liText=$(this).text();
    $("#sGsName").val(liText);
    $("#ts").css("display","none");
}
//返回查询的公司的信息
function gsInfo(){
    var vsGsName=$("#sGsName").val();
    if(vsGsName!=""){
        $.post("addEmp1_1.asp",{sGsName:vsGsName},function(m){
            $("#content").html(m);
        });
    }
}
</script>

服务端代码

<％@LANGUAGE="VBSCRIPT" CODEPAGE="65001"％>
<％
response.Charset="utf-8"
sGsName=unescape(trim(request.Form("sGsName")))
dbpath="demo.mdb"
sqlStr="select top 5 sgName from cominfo where sgName like '％"&sGsName&"％'"
connstr = "Provider = Microsoft.Jet.OLEDB.4.0;Data Source = " & Server.MapPath(dbPath)
set conn=server.CreateObject("adodb.connection")
conn.open connstr
set rs=conn.execute(sqlStr)
if not rs.bof and not rs.eof then
do while not rs.eof
str=str&"<a>"&rs("sgName")&"</a>"
rs.movenext
loop
else
str="<a>没有此公司</a>"
end if
rs.close
set rs=nothing
set conn=nothing
response.Write(escape(str))
％>