jQuery插件之AutoComplete使用方法

来源：互联网发布：网页机器人源码编辑：程序博客网时间：2024/05/08 15:15

http://files.cnblogs.com/jianjialin/jquery.autocomplete.js
http://files.cnblogs.com/jianjialin/jquery.autocomplete.css

public void ProcessRequest (HttpContext context) {        context.Response.ContentType = "text/plain";        context.Response.Write(getProducts(context));    }    private string getProducts(HttpContext context)    {        string sql = "select * from products";        string re = JsonHelper.ConvertDataTableToJson(SqlHelper.ExecuteDataSet(sql).Tables[0]);        return re;    }

    <script type="text/javascript">        /*==========用户自定义方法==========*/        //城市数据        var cityList;        //autocomplete选项        var options = {            minChars: 1,            max: 500,            width: 250,            matchContains: true,            formatItem: function(row, i, max) {//显示出来的项格式                return i + "/" + max + ": /"" + row.ProductID + "/" [" + row.ProductName + "]";            },            formatMatch: function(row, i, max) {                return row.ProductName; //用户输入的内容在哪些数据项里面搜索。例如现在是在productName搜索，若要加上ProductID则为 return row.productID+" "+ row.ProductName;            },            formatResult: function(row) {                return row.ProductName;            }        };        //autocomplete初始化函数        function initAutoComplete(json) {            $("#inputName").autocomplete(json, options);            $("#inputName").result(function(event, data, formatted) {//data 选中的行json对象. formatted是formatMatch返回的值.                $("#inputId").val(data.ProductID);            });        }        /*==========加载时执行的语句==========*/        $(function() {            //加载城市数据, 并在回调函数中用返回的数据初始化autocomplete            $.getJSON("products.ashx", {}, function(json) {                initAutoComplete(json);            })        });            </script>    <link href="jquery.autocomplete.css" rel="stylesheet" type="text/css" /></head><body><div class="ui-widget ui-widget-content ui-corner-all" style="width: 700px; padding: 5px;">        <h3>            Demo. 应用AutoComplete插件 </h3>        <br style="clear: both" />        <div class="formLabel">            <label for="inputName">请输入城市拼音和汉字:</label>        </div>        <div class="formInput">            <input id="inputName" name="inputName" type="text" />        </div>        <br style="clear:both" />        <br style="clear: both" />        <div class="formLabel">            <label for="inputId">城市ID:</label></div>        <div class="formInput">            <input id="inputId" name="inputId" type="text" /></div>        <br style="clear: both" />        <br style="clear: both" />    </div></body>

StationAjax.ashx

 public class StationAjax : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            context.Response.Write(getProducts());
        }
        private string getProducts()
        {
            string re = JsonHelper.ConvertDataTableToJson(StationDa.GetTable());
            return re;
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

JsonHelper

public static string ConvertDataTableToJson(DataTable dt)
        {
            StringBuilder JsonString = new StringBuilder();
            //Exception Handling        
            if (dt != null && dt.Rows.Count > 0)
            {
                JsonString.Append("[ ");
                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    JsonString.Append("{ ");
                    for (int j = 0; j < dt.Columns.Count; j++)
                    {
                        if (j < dt.Columns.Count - 1)
                        {
                            JsonString.Append(dt.Columns[j].ColumnName.ToString() + ":" + "/"" + dt.Rows[i][j].ToString() + "/",");
                        }
                        else if (j == dt.Columns.Count - 1)
                        {
                            JsonString.Append(dt.Columns[j].ColumnName.ToString() + ":" + "/"" + dt.Rows[i][j].ToString() + "/"");
                        }
                    }
                    /**/
                    /*end Of String*/
                    if (i == dt.Rows.Count - 1)
                    {
                        JsonString.Append("} ");
                    }
                    else
                    {
                        JsonString.Append("}, ");
                    }
                }
                JsonString.Append("]");
                return JsonString.ToString();
            }
            else
            {
                return null;
            }
        }