zoukankan      html  css  js  c++  java
  • autocomplete

      public class JsonHandler : IHttpHandler
        {
    
            public void ProcessRequest(HttpContext context)
            {
                string str = context.Request.QueryString["q"];
    
                DataTable dt = new DataTable();
                DataColumn copycolumn1 = new DataColumn("name", typeof(String));
                DataColumn copycolumn2 = new DataColumn("code", typeof(String));
                DataColumn copycolumn3 = new DataColumn("spell", typeof(String));
                dt.Columns.Add(copycolumn1);
                dt.Columns.Add(copycolumn2);
                dt.Columns.Add(copycolumn3);
    
                for (int i = 0; i < 10; i++)
                {
                    DataRow row = dt.NewRow();
                    row["name"] = "深发展A"+i;
                    row["code"] = "000001";
                    row["spell"] = "sfza";
                    dt.Rows.Add(row.ItemArray);
                    DataRow row1 = dt.NewRow();
                    row1["name"] = "苹果A" + i;
                    row1["code"] = "000002";
                    row1["spell"] = "apple";
                    dt.Rows.Add(row1.ItemArray);
                }
                string str1 = DataTableToJson(dt);
                context.Response.ContentType = "application/json";
                context.Response.Write(str1);
            }
    
            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
    
            /// <summary>  
            /// dataTable转换成Json格式  
            /// </summary>  
            /// <param name="dt"></param>  
            /// <returns></returns>  
            public string DataTableToJson(DataTable dtChild)
            {
                StringBuilder jsonBuilder = new StringBuilder();
                jsonBuilder.Append("[");
                for (int i = 0; i < dtChild.Rows.Count; i++)
                {
                    jsonBuilder.Append("{");
                    for (int j = 0; j < dtChild.Columns.Count; j++)
                    {
                        jsonBuilder.Append("");
                        jsonBuilder.Append(dtChild.Columns[j].ColumnName);
                        jsonBuilder.Append(":\"");
                        jsonBuilder.Append(dtChild.Rows[i][j].ToString());
                        jsonBuilder.Append("\",");
                    }
                    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                    jsonBuilder.Append("},");
                }
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                jsonBuilder.Append("]");
                return jsonBuilder.ToString();
            }
             
        }
    <script type="text/javascript" src="Scripts/jquery.js">
    </script>
    <script type="text/javascript" src="Scripts/jquery.autocomplete.js">
    </script>
    
    <script type="text/javascript">
        var stockInfoJson = [
        { name: "深发展A", code: "000001", spell: "sfza" },
        { name: "万科A", code: "000002", spell: "wka" },
        { name: "ST 国 农", code: "000004", spell: "stgn" },
        { name: "世纪星源", code: "000005", spell: "sjxy" },
        { name: "深振业A", code: "000006", spell: "szya" },
        { name: "ST 达 声", code: "000007", spell: "stds" },
        { name: "ST宝利来", code: "000008", spell: "stbll" },
        { name: "中国宝安", code: "000009", spell: "zgba" },
        { name: "S ST华新", code: "000010", spell: "ssthx" },
        { name: "山航B", code: "200152", spell: "shb" },
        { name: "*ST帝贤B", code: "200160", spell: "stdxb" },
        { name: "雷伊B", code: "200168", spell: "lyb" },
        { name: "宝石B", code: "200413", spell: "bsb" },
        { name: "小天鹅B", code: "200418", spell: "xteb" },
        { name: "粤高速B", code: "200429", spell: "agsb" },
        { name: "宁通信B", code: "200468", spell: "ltxb" },
        { name: "晨鸣B", code: "200488", spell: "cmb" },
        { name: "珠江B", code: "200505", spell: "zjb" },
        { name: "闽灿坤B", code: "200512", spell: "mskb" },
        { name: "华电国际", code: "600027", spell: "hdgj" }
    ];
    
        var InfoJson = [{ name: "深发展A0", code: "000001", spell: "sfza" },
     { name: "深发展A1", code: "000001", spell: "sfza" },
     { name: "深发展A2", code: "000001", spell: "sfza" },
     { name: "深发展A3", code: "000001", spell: "sfza" },
     { name: "深发展A4", code: "000001", spell: "sfza" },
     { name: "深发展A5", code: "000001", spell: "sfza" },
     { name: "深发展A6", code: "000001", spell: "sfza" },
     { name: "深发展A7", code: "000001", spell: "sfza" },
     { name: "深发展A8", code: "000001", spell: "sfza" },
     { name: "深发展A9", code: "000001", spell: "sfza"}];
        /*==========加载时执行的语句==========*/
        $(function () {
            $.getJSON("JsonHandler.ashx", {}, function (json) {
                initAutoComplete(json);
            })
        });
        
    
        function initAutoComplete(json) {
            $("#suggest1").autocomplete(json, {
                minChars: 1,
                matchCase: false, //不区分大小写"JsonHandler.ashx"
                autoFill: false,
                max: 10,
                formatItem: function (row, i, max, term) {
                   // row = eval("(" + row + ")"); "JsonHandler.ashx"
                    var v = $("#suggest1").val();
                    return row.name + " (" + row.code + ")";
                    if (row.code.indexOf(v) == 0 || row.spell.indexOf(v) == 0) {
                        return row.name + " (" + row.code + ")";
                    }
                    else
                        return false;
                },
                formatMatch: function (row, i, max) {
                  //  row = eval("(" + row + ")"); 
                    return row.name + " (" + row.code + ")";
                },
                formatResult: function (row) {
                   // row = eval("(" + row + ")"); 
                    return row.name + " (" + row.code + ")";
                },
                reasultSearch: function (row, v)//本场数据自定义查询语法 注意这是我自己新加的事件
                {
                  //  row = eval("(" + row + ")"); 
                    //自定义在code或spell中匹配
                    if (row.data.code.indexOf(v) >= 0 || row.data.spell.indexOf(v) >= 0||row.data.name.indexOf(v)>=0 ) {
                        return row;
                    }
                    else
                        return false;
                }
            });
        }
    
    </script>
        <h2>
            Welcome to ASP.NET!
        </h2>
        <p>
            To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
        </p>
        <p>
            You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
                title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
        </p>
        <hr />
        <h1>jquery.autocomplete.js 扩展自定义查询方法</h1>
    
    <p>
                <label>StockInfo(local):</label>
                <input type="text" id="suggest1" />
    </p>
  • 相关阅读:
    es6之class继承
    es6-class基本语法
    vue-cli3搭建pwa项目(一)
    vue 组件的通信方式
    react之组件&props
    React之元素渲染
    JSX
    JSX
    在项目中怎么使用react
    认识react
  • 原文地址:https://www.cnblogs.com/cjmtt/p/2864279.html
Copyright © 2011-2022 走看看