[原创]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 + " <" + mail.name + ">";
}
//选择街路巷
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官方插件下载，大家有兴趣的可以研究一下
