• 基礎方法支援：

一. DataTable 轉換成 Json

　　換句話說如何在ASP.NET將一個DataTable序列化為 Json陣列，或者如何從一個DataTable返回一個Json字串。　　

　　使用 JavaScriptSerializer.

　　首先我們新增System.Web.Script.Serialization名稱空間，如下：

　　　　using System.Web.Script.Serialization;  

　　JavaScriptSerializer這個類是由非同步通訊層內部使用來序列化和反序列化資料。如果序列化一個物件，就使用序列化方法。反序列化Json字串，使用Deserialize或DeserializeObject方法。在這裡，我們使用序列化方法得到Json格式的資料。程式碼以下：

public static class Data2Json
{
    public static String convertJson(DataTable dt)
    {
        JavaScriptSerializer javaScriptSerializer = new JavaScriptSerializer();
        javaScriptSerializer.MaxJsonLength = Int32.MaxValue;
        ArrayList arrayList = new ArrayList();
        
 
foreach (DataRow dataRow in dt.Rows)
        {
            Dictionary<string, object> dictionary = new Dictionary<string, object>();
            foreach (DataColumn dataColumn in dt.Columns)
            {
                dictionary.Add(dataColumn.ColumnName, dataRow[dataColumn.ColumnName].ToString());
            }
            arrayList.Add(dictionary);
        }
        
 
return javaScriptSerializer.Serialize(arrayList);
    }
}

二. 加入一般處理程式，將上一步的Json字串寫入HTTP響應輸出流，傳到前端頁面

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

using System;
using System.Web;
using SysManage;
using System.Data;
public class Xcode : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        string str = context.Request["type"];
        string sql = string.Format("select * from XCode where XCODE like '{0}%'", str);
        Database dt = new Database();
        DataTable data = dt.ExecuteSql(sql);

        context.Response.Write(Data2Json.convertJson(data));
    }

    public bool IsReusable
    {
        get { return false; }
    }
}

•  前端實現方法：

　其中要使用：jquery 的 autocomplete.js ，自行搜尋引用即可

<script type="text/javascript">

        function dataFind() {

            var fl = $("input[name='Rblflcode']:checked").val();
            $.ajax({
                contentType: "application/json",
                url: "../Xcode.ashx?type=" + fl,
                dataType: "json",
                success: function (msg) {
                    if (msg == null) {
                    }
                    else if (msg != null) {
                        jQuery(function ($) {
                            $("#flxzTb").autocomplete(msg, {
                                minChars: 0,
                                autoFill: false,         //是否選多個,用","分開
                                mustMatch: false,     //是否全匹配, 如資料中沒有此資料,將無法輸入
                                matchContains: true,         //是否全文搜尋,否則只是前面作為標準
                                scrollHeight: 300,
                                scroll: true,
                                width: $("#flxzTb").width(),
                                multiple: false,
                                formatItem: function (row, i, max) {           //顯示格式
                                    return "<span style='width:" + $("#flxzTb").width() + "px;float:left;font-style: normal;font-weight:normal;' >" + "[" + row.XCODE + "]---" + row.flmc  + " </span>";
                                },
                                formatMatch: function (row, i, max) {          //以什麼資料作為搜尋關鍵詞,可包括中文,
                                    return row.flmc;
                                },
                                formatResult: function (row) {
                                    return  row.flmc ; //返回結果 
                                }
                            });
                        });
                    }
                }
            });
        }
</script>

　　其中  ID = flxzTb 的TextBox控制元件用於查詢顯示。 url: "../Xcode.ashx?type=" + fl, 呼叫 Xcode.ashx 來處理傳入的 xcode 欄位用於資料庫篩選。

　　當資料庫中存有資料時，通過在TextBox框內鍵入內容會自動進行相應的內容匹配，以下拉的形式進行顯示。