JQuery实现文本框自动匹——请高人帮我看看

Question

JQuery监听textbox的keyup事件
 $(document).ready(function()
    {
        $("#txt_Keys").keyup(function()
        {
            var proname=$("#txt_Keys").val();
            if(proname.length!=0)
            {alert(proname);
                $("autodiv").attr("style","display:block");
                $.ajax(
                {
                    type:"GET",
                    url:"Handler.ashx",
                    data:"keyword"+proname,
                    success:function(data)
                    {
                        if(data!="")
                        {
                            <!--写到这里有点迷糊了，不知道该干啥了~-->
                        }
                    }
                })
            }
        })
    });其中Handler.ashx代码如下：
public void ProcessRequest (HttpContext context) 
    {
        context.Response.ClearContent();
        context.Response.ContentType = "text/plain";
        context.Response.Cache.SetCacheability(HttpCacheability.NoCache);        string proName="";
        proName = context.Request["keyword"];
        string sql = "select Top 10 Project_Name from UDP_Project where Project_Name like '" + proName + "'";
        DataSet ds = SQLHelper.theSearch(sql);
        ArrayList list = new ArrayList();
        
        for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
        {
            list.Add(ds.Tables[0].Rows[i].ToString().Trim());     
        }
        System.Threading.Thread.Sleep(1000);
        context.Response.Write(list);
        context.Response.End();
    }，麻烦帮我看看，有没有写错了，做了几天了~~

Answer 1

if(data!=""){
//根据你自己的需要写codea
}
后台返回的值 需要是 js能识别的变量类型
比如
context.Response.Write("{\"name\": \"Tom\"}");
success:function(data){
data = eval('('+data+')');
alert( data.name )
}这样就可以了

Answer 2

google一下：jQuery 自动匹配

Answer 3

ArrayList list = new ArrayList();
我需要将这么多个字符串都返回。该怎么办呢。ArrayList好像JS识别不了~

Answer 4

 System.Threading.Thread.Sleep(1000);这句话是为了些神马？？？

Answer 5

http://blog.csdn.net/baby97/article/details/4270233仿谷歌下拉提示

Answer 6

嗯，刚看看一会JSON的知识，刚准备试下~

Answer 7

先自行搜索jquery.autocomplete插件
下载后它包括jquery.autocomplete.js,jquery.autocomplete.css, jquery-latest.js
调用方式<script type="text/javascript" language="javascript"> 
$(document).ready(function() {
            $.ajax({
                type: "get",
                contentType: "application/json",
                url: "returndata.aspx",
                success: function(data) {
                    var data = eval("(" + data + ")");                 
                    $("#txtIMO").autocomplete(data, {
                        minChars: 1,
                        matchContains: true,
                        autoFill: false,
                        mustMatch: false,  //是否完全匹配         
                        width: 80, //宽度                             
                        formatItem: function(row, i, max) {
                            return row.IMO;
                        },
                        formatMatch: function(row, i, max) {
                            return row.IMO;
                        },
                        formatResult: function(row) {
                            return row.IMO;
                        }
                    });
                }
            })
        })
    </script>关键的代码  JavaScriptSerializer j = new JavaScriptSerializer();
  json = j.Serialize(list);
  Response.Write(json);
  Response.End();

Answer 8

你在那里面把数据填充到autodiv里面不就可以了 另外不要用线程 在进入时间的时候卸载掉事件 ajax请求完成或失败在绑定事件

Answer 9

一本jquery文档就可以帮助你实现自己看了

Answer 10

 $("autodiv").attr("style","display:block");    你这里一切正常？ 貌似楼主$("autodiv")这个写错了

Answer 11

你后台直接输出list...可以么？   给你个思路应该是将数据用一个逗号或者别的符号分割够输出 在前台在split  或者输出json数据。

Answer 12

嗯，谢谢各位，功能实现了。还是用的JSON。

Answer 13

我把全整代码贴出来吧。供后人参考~
JQuery代码如下：
    <script type="text/javascript">
    $(document).ready(function()
    {
        //使div隐藏
        $("#autodiv").attr("style","display:none");
//        var p=$("#txt_Keys");
//        var position=p.position();
//        $("#autodiv").html("left:"+position.left+",top:"+position.top);
        $("#txt_Keys").keyup(function()
        {
            var proname=$("#txt_Keys").val();
            var s="";
            if(proname.length!=0)
            {
                //$("#autodiv").attr("style","display:none");
                $.ajax(
                {
                    type:"GET",
                    url:"Handler.ashx",
                    data:"keyword="+proname,//后台接收proname的关键
                    success:function(data)
                    {
                        if(data!="")
                        {                           
                            data=eval('('+data+')');
                            //json串输出
                            $.each(data,function(i,v)
                            {
                                $.each(v,function(k,val)
                                {
                                    //alert(val.proName);
                                    s+="<table><tr><td width=\"152px\" left=\"0\">"+val.proName+"</td></tr></table>";
                                    $("#autodiv").attr("style","display:block");
                                    document.getElementById("autodiv").innerHTML=s;
                                })
                            })
                            $("#autodiv td").click(function(e)
                            {
                               $("#txt_Keys").val($(this).text());
                               $("#autodiv").attr("style","display:none");
                               //$("#autodiv").fadeOut('slow');
                            })
                            $("#autodiv td").mouseover(function(e)
                            {
                                $(this).css("background","#B3CFFC");
                                $(this).css("cursor","hand")
                            })
                            $("#autodiv td").mouseout(function(e)
                            {
                                $(this).css("background","");
                            })
                        }
                    }
                })
            }
        })    });
    </script>
其中Handler.ashx如下，我用的VS2005这个文件VS版本不同可能有点小区别：public class Handler : IHttpHandler 
{
    string proName = ""; 
    public void ProcessRequest (HttpContext context) 
    {
        context.Response.ClearContent();
        context.Response.ContentType = "text/plain";
        context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        proName = context.Request["keyword"];
        string sql = "select Top 10 Project_Name from UDP_Project where Project_Name like '%" + proName + "%' or Project_Yjdw like '%"+proName+"%' or Project_Yjr like '%"+proName+"%'";//写上自己的SQL
        DataSet ds = SQLHelper.theSearch(sql);//这个应该能看懂吧。返回的是DataSet
        string json = "";         
        json = this.DataTableToJSON(ds.Tables[0]);
        context.Response.Write(json);
        context.Response.End();
    }
    //public string ToJSON(string item)
    //{
    //    // TODO: ToJSON 实现
    //    string json = string.Empty;
    //    return "{"+string.Format("\"proName\":\"{0}\"",item)+"}";
    //}    public string DataTableToJSON(DataTable dt)
    {
        //DataTable转换成JSON
        if (dt != null && dt.Rows.Count > 0)
        {
            StringBuilder jsonBuilder = new StringBuilder();
            jsonBuilder.Append("{");
            jsonBuilder.Append("\"proNames\":");
            jsonBuilder.Append("[");
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                jsonBuilder.Append("\"");
                jsonBuilder.Append("proName");
                jsonBuilder.Append("\":\"");
                jsonBuilder.Append(dt.Rows[i][0].ToString());
                jsonBuilder.Append("\",");
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("},");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("]");
            jsonBuilder.Append("}");
            return jsonBuilder.ToString();
        }
        else
        {
            return "{\"proName\":\"\"}";
        }
    }
CSS的话根据自己需求去写吧~
<input id="txt_Keys" type="text"/>
<div id="autodiv"></div>