[原创]JQuery的autoCompleate插件的使用(内含解决Jquery事件与UpdatePanel互斥的问题，只需要在body中改为如下:<body onload=’load()’></body>即可)

1、引用基础js包 

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

<script src="../js/jquery.autocomplete.pack.js" type="text/javascript"></script>

<script src="../js/jquery.ajaxQueue.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="../styles/jquery.autocomplete.css" />

<script type="text/javascript" src="../js/jquery.bgiframe.js"></script>
2、使用方法： 
<script type="text/javascript">
    function log(event, data, formatted) {
		$("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");
	}
	
	function formatItem(row) {
		return row[0] + " (<strong>id: " + row[1] + "</strong>)";
	}
	function formatResult(row) {
		return row[0].replace(/(<.+?>)/gi, '');
	}
	
	//解决 jquery 与 updatepanel 不能共存的方法 start
    function load() {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
    }

    function EndRequestHandler() {
        //updatePanel每次回调完成后会调用该参数，如果有需要在updatepanel内放置jquery的代码这里边也需要调用一份。
        //重新注册jquery
        //selectJLX();
        //selectXZ();
    }
    //解决 jquery 与 updatepanel 不能共存的方法 end
    
	function format(mail) {
		return mail.id + " &lt;" + mail.name + "&gt";
	}

	//选择街路巷
	function selectJLX()
	{
    	$("#txtViliage").autocomplete("../Handler.ashx", {
            multiple: false,
            minChars:0,
            dataType: "json",
            //autoFill:true,
            //mustMatch:true,
            extraParams:{"q":'2'},
            matchContains: true, 
            parse: function(data) {
	            return $.map(eval(data), function(row) {
		            return {
			            data: row,
			            value: row.name , 
			            result: row.name
		            }
	        });},
	        formatMatch: function(data) {
	            return data.name;                   
	                                  },
            formatItem: function(item) { 
                return  item.name ; 
            }
            }).result(function(e, item) {  //alert(item.id);
        });
	}
    $(document).ready(function(){
        selectJLX();
	});
</script>
3、其中Handler.ashx返回一组json数据源码如下： 
<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using Microsoft.Practices.EnterpriseLibrary.Data;
using System.Data;

public class Handler : IHttpHandler
{

    public void ProcessRequest( HttpContext context )
    {
        context.Response.ContentType = "application/json";
        if (context.Request.QueryString["q"] == "1")
        {
            context.Response.Write( "[{\"id\":\"aaa\",\"name\":\"ccc\"}]" );
        }
        else
        {
            Database database = DatabaseFactory.CreateDatabase( "ConnectionStringCur" );

            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            string sql = AppConfig.GetAppSettingValues( "roadSql" );
            if (!string.IsNullOrEmpty( sql ))
            {
                sb.Append( "[" );

                using (System.Data.Common.DbCommand cmd = database.GetSqlStringCommand( sql ))
                {
                    using (IDataReader idr = database.ExecuteReader( cmd ))
                    {
                        while (idr.Read())
                        {
                            sb.Append( "{" ).AppendFormat( "\"id\":\"{0}\",\"name\":\"{1}\"", Convert.ToString( idr[0] ), Convert.ToString( idr[1] ) ).Append( "}," );
                        }
                    }
                }
                if (sb.ToString().EndsWith( "," ))
                {
                    sb.Remove( sb.Length - 1, 1 );
                }
                sb.Append( "]" );
            }
            context.Response.Write( sb.ToString() );
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}
autoCompleated官方插件下载，大家有兴趣的可以研究一下
posted @ 2013-03-12 23:46  倚楼听雨  阅读(675)  评论(1)    收藏  举报