<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>JS object instead of DB: jquery.ajax-combobox</title> <link rel="stylesheet" href="js/jquery.ajax-combobox.css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.ajax-combobox.min.js"></script> <script type="text/javascript"> /* https://github.com/sutara79/jquery.ajax-combobox https://plugins.jquery.com/ajax-combobox/ https://sutara79-php.herokuapp.com/demo/jquery.ajax-combobox/ var items = []; $.each( data, function( key, val ) { items.push( "<li id='" + key + "'>" + data[0].CountyCode + "</li>" ); }); $( "<ul/>", { "class": "my-new-list", html: items.join( "" ) }).appendTo( "body" ); */ var data; $.getJSON( "AjaxComboxHandler.ashx", function(data){ $('#foo').ajaxComboBox( data, { lang: 'hk', navi_num: 5, //顯示幾個數字頁碼 per_page: 15,//每頁顯示多少條 db_table: 'nation', field: 'name', sub_info: true, show_field:'CountyCode,name,HkName,EnName,CnName,position,IdOrder',//提示能夠顯示的字段 sub_as: { CountyCode: '國際區號:', //提示顯示的列名 HkName:'繁體中文名:', EnName: '英文名:', CnName:'簡體中文名:', position: '所在洲:', IdOrder:'排序:',//字符串排序 }, select_only: true, init_record: '00', primary_key: 'CountyCode', order_by: [ 'IdOrder ASC', // ASC or DESC 'CountyCode' ] } ); }); </script> </head> <body> <h1>JS object instead of DB: jquery.ajax-combobox</h1> <form id="Form1" action="" runat="server"> <label for="foo">國家:</label><br> <asp:TextBox ID="foo" CssClass="foo" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" onClick="this.setSelectionRange(0, this.value.length)/> </form> </body> </html>
/// <summary> /// $codebehindclassname$ 的摘要說明 /// 塗聚文 塗聚文 Geovin Du /// 2019-7-22 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class AjaxComboxHandler : IHttpHandler { CountyTelCodeBLL telbll = new CountyTelCodeBLL(); /// <summary> /// /// </summary> /// <param name="context"></param> public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; List<EntityCounty> list = new List<EntityCounty>(); CountyTelCode code = new CountyTelCode(); //code.TelData().DefaultView.Sort = "IdOrder asc"; //DataRow[] drs = code.TelData().Select("", "IdOrder asc"); DataTable dt = telbll.SelectCountyTelCodeDataTableAll(); foreach (DataRow row in dt.Rows) //code.TelData().Rows { EntityCounty ec = new EntityCounty(); ec.CountyCode = row["TelCoutyCode"].ToString().Trim(); ec.name = row["SimpleNameHK"].ToString().Trim(); ec.HkName = row["SimpleNameHK"].ToString().Trim(); ec.CnName = row["SimpleNameCN"].ToString().Trim(); ec.EnName = row["SimpleNameEN"].ToString().Trim(); ec.position = row["Continent"].ToString().Trim(); ec.IdOrder = row["IdOrder"].ToString().Trim(); list.Add(ec); } //序列化 JavaScriptSerializer JavaScriptSerializer jss = new JavaScriptSerializer(); string str = jss.Serialize(list); //返回 context.Response.Write(str); } public bool IsReusable { get { return false; } } /// <summary> /// /// </summary> /// <param name="jsonData"></param> /// <returns></returns> private Dictionary<string, object> JsonToDictionary(string jsonData) { //實例化JavaScriptSerializer類的新實例 JavaScriptSerializer jss = new JavaScriptSerializer(); try { //將指定的 JSON 字符串轉換爲 Dictionary<string, object> 類型的對象 return jss.Deserialize<Dictionary<string, object>>(jsonData); } catch (Exception ex) { throw new Exception(ex.Message); } } } /// <summary> /// /// </summary> public class EntityCounty { private string _CountyCode; /// <summary> /// [ScriptIgnore] 爲不顯示 /// </summary> public string CountyCode { get { return _CountyCode; } set { _CountyCode = value; } } private string _name; /// <summary> /// /// </summary> public string name { get { return _name; } set { _name = value; } } private string _EnName; /// <summary> /// /// </summary> public string EnName { get { return _EnName; } set { _EnName = value; } } private string _CnName; /// <summary> /// /// </summary> public string CnName { get { return _CnName; } set { _CnName = value; } } private string _HkName; /// <summary> /// /// </summary> public string HkName { get { return _HkName; } set { _HkName = value; } } private string _position; /// <summary> /// /// </summary> public string position { get { return _position; } set { _position = value; } } private string _IdOrder; /// <summary> /// /// </summary> public string IdOrder { get { return _IdOrder; } set { _IdOrder = value; } } }