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