jQueryプラグインのAutoComprateの使い方

8309 ワード

Json aut coplete 機能 String クラス jqueryプラグイン

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;
            }
        }

javaの単一の例のモードの実例、および単一の例の体現する肝心な点

ある関数で呼び出し時にログを反射して記録します。