首页 新闻 会员 周边

急!急!急!

0
[已解决问题] 解决于 2009-11-27 15:41

利用ajax+jquery 如何实现上述功能,各位大侠救命啊!!! 

Jaryleely的主页 Jaryleely | 菜鸟二级 | 园豆:367
提问于:2009-11-27 13:43
< >
分享
最佳答案
0

Keyup事件

 

<!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 runat="server">
    <title>未命名頁面</title>
    <style type="text/css">
ul{list-style-type:none; padding:0px; margin:0px;}
li{list-style-type:none; padding:2px; margin:0px;cursor:pointer;border:1px solid transparent;}
</style>

    <script language="javascript" type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>

    <script language="javascript" type="text/javascript">
    $(document.body).ready(function()
    {
      $("#get_name").keyup(function()
      {
        var left=$(this).offset().left;
        var top=$(this).offset().top;
        var width=$(this).width();
        var height=$(this).height();
        var newTOP=top+height+5;
        var id=$(this).attr("id")+"_div";
     
          var suggestVal=$(this).val();
           $.ajax({
           type:"POST",
           url:"Handler.ashx",
           data:"cmd=GetSuggest&str="+suggestVal,
           success:function(data)
           {
             var newOBJECT=$("#"+id);
             if(newOBJECT.length==0){
                   var html="<div style='position:absolute;left:"+left+"px;top:"+newTOP+"px;width:"+width+"px;padding:2px;border:1px solid #e7e8e9;background-color:#f1f1f1' id='"+id+"'>woody.wu</div>";
                   $(document.body).append(html);
              }
              else
              {
                newOBJECT.show();
              }
              newOBJECT.empty();
              newOBJECT.html(data);
              newOBJECT.find("ul").find("li").hover(function()
              {
                $(this).css({"background-color":"yellow","border":"1px dashed #e0e0e0"});
              },function()
              {
               $(this).css({"background-color":"transparent","border":"1px solid transparent"});
               
              });
              newOBJECT.find("ul").find("li").click(function()
              {
                var va=$(this).html();
                $("#get_name").val(va);
                //newOBJECT.hide();
              });
              $(document).click(function(event)
              {
                 var oleft=newOBJECT.offset().left;
                 var otop=newOBJECT.offset().top;
                 var owidth=newOBJECT.width();
                 var oheight=newOBJECT.height();
                 var bodyScrollTop= document.documentElement.scrollTop || document.body.scrollTop;
                 var bodyScrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
                 bodyScrollTop=event.clientY+bodyScrollTop;
                 bodyScrollLeft=event.clientX+bodyScrollLeft;
                 var lLeft=oleft+owidth;
                 var lTop=oheight+otop;
                 if(!(bodyScrollTop>=otop && bodyScrollTop<=lTop && bodyScrollLeft>=oleft && bodyScrollLeft<=lLeft)  )
                 {
                   newOBJECT.hide();
                 }
              });
           }
           });
      
      });

    });
   
    </script>

</head>
<body>
    <form id="form1" runat="server" >
        <div>
            <input type="text" id="get_name" name="get_name" maxlength="10" />
        </div>
    </form>
</body>
</html>

 

後台

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Text;
using System.Data;
using System.Data.OleDb;
using System.Reflection;
using System.Reflection.Emit;

public class Handler : IHttpHandler {
   
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
         string Cmd = context.Request["cmd"];
        if (!string.IsNullOrEmpty(Cmd))
        {
            MethodInfo Method = this.GetType().GetMethod(Cmd, BindingFlags.NonPublic | BindingFlags.Instance);
            if (Method != null)
            {
                Method.Invoke(this, new object[] { context });
            }
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
    void GetSuggest(HttpContext context)//這個內容可以根據數據庫離的內容來查詢
    {
        string vStr = context.Request["str"];
        StringBuilder html = new StringBuilder();
        Random rd = new Random();
        int i = rd.Next(30);
        string STR = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890~!@%#^*)@!_";
        int m = STR.Length;
        int k = 0;
        string RaStr = string.Empty;
        html.Append("<ul>");
        for (int j = 0; j < i; j++)
        {
            RaStr = string.Empty;
            for (int n = 0; n < 4; n++)
            {
                RaStr += STR[rd.Next(0, STR.Length)].ToString();
            }
            html.Append("<li>");
            html.Append(RaStr);
            html.Append("</li>");
        }
        html.Append("</ul>");
        context.Response.Write(html.ToString());
    }

}

woody.wu | 老鸟四级 |园豆:3621 | 2009-11-27 14:12
大哥你很强!谢谢啦
Jaryleely | 园豆:367 (菜鸟二级) | 2009-11-27 15:41
我用您的方法试了,为什么不显示结果呢?
Jaryleely | 园豆:367 (菜鸟二级) | 2009-11-27 16:03
@Jaryleely:后台调用的方法要正确哦
woody.wu | 园豆:3621 (老鸟四级) | 2009-11-27 22:09
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册