AutoComplete

aspx页面

需要引用的文件：

<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.autocomplete.js"></script>

script：

<script type="text/javascript" language="javascript">

$().ready(function() {

$.ajax({         contentType: "application/json",

url: "AutoComplete.ashx",

dataType: "json",

success: function (msg) {

$("#reg_XIAOQU").autocomplete(msg, {

minChars: 1,                    //最少输入字条

max: 40,

autoFill: false,                //是否选多个,用","分开

mustMatch: false,               //是否全匹配, 如数据中没有此数据,将无法输入

matchContains: true,            //是否全文搜索,否则只是前面作为标准

scrollHeight: 220,

width: 200,

multiple: false,

formatItem: function (row, i, max) {                    //显示格式

return "<span>" + row.alladress + "</span>";                     },

formatMatch: function (row, i, max) {               //以什么数据作为搜索关键词,可包括中文,

return row.alladress;                     },

formatResult: function (row) {                      //返回结果

return row.alladress;                     }

}).result(function (event, data, formatted) {

alert(data.alladress);                     //根据最终返回的数据做处理

});         }     });

});

</script>

后台代码处理页AutoComplete.ashx：

using System;

using System.Web;

using System.Data;

using System.Collections.Generic;

using System.Web.Script.Serialization;

public class AutoComplete : IHttpHandler {

public void ProcessRequest (HttpContext context) {

context.Response.ContentType = "text/plain";

ServiceWS myWS = new ServiceWS();     //实例化数据操作类

string sql = "Select alladress From LIVINGAREA";

DataSet ds = myWS.GetDsFromSql(sql);

if (ds.Tables[0]!=null)          {

string data = DbHelper.DataTable2Json(ds.Tables[0]);

context.Response.Write(data);

context.Response.Flush();

context.Response.End();

}

}

public bool IsReusable {

get {             return false;         }

}

}

效果图：