用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))
%>


下载代码


[本日志由 亮亮 于 2008-12-09 08:49 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: suggest 自动提示
评论: 4 | 引用: 0 | 查看次数: -
回复回复4545[2008-12-09 04:03 PM | del]
你好  可以给给我发一份吗? 非常感谢...
    QQ:285879737

引用来自 亮亮 亮亮 于 2008-12-09 08:45 PM 回复
代码都贴出来了还要我发呀??还是打个包,你自己下吧!注意没有jq文件!
回复回复ayan[2008-07-11 10:03 AM | del]
刚看到你写的这个东西 感觉不错,想学习一下 能不能也发给我一份啊? 谢谢!qq:182507221
回复回复亮亮[2008-05-27 08:13 PM | del]
英文显示的是一个blog的插件,网上搜搜就很多呀!!
代码补充好了,你自己看下,其实没什么,你另存为就可以看到js代码呀!!
回复回复rainbow[2008-05-27 03:55 PM | del]
大哥,你那个提示有没有下载的,"从数据库取出相关内容以供选择"这个蛮好的,用处很大啊?还有一个就是你那个英文的显示是怎么弄的,我把你的english.js给down下来了,发现"  this.queryDB=function (e){
     o.url="Plugins/EnglishXML/getEnglish.asp?s="+Math.random()
     o.Open();
  }"
这个是不是数据里取的哦,我前面加了你的域名,好像不行啊,后来一想,AJAX不支持跨域访问吧.
这两个东东,有没有简单的示例啊,发给我学习一下啊,我的邮箱是eaglepie888@qq.com,谢谢!
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.