城市选择控件:
// 1. 控件的HTML规范, 可利用dataset简单配置参数
<input type="text" name="city" id="control-city" class="form-control control-city icon-form-control i-f-c-location"
placeholder="请选择缴纳地区" data-async="true" data-url="/api.php?act=suggest" value="">
// 2. 初始化
$('.control-city').controlCity({
async: false, // 是否异步加载, 默认 false
multiple: 5, // 大于 1 为多选模式,小于2为单选模式
debug: true,
text: ['上海', '北京'], // 默认值(显示文字)
value: ['shanghai', 'beijing'], // 默认值
// text: '上海,北京', // 默认值(显示文字)
// value: 'shanghai,beijing', // 默认值
separator: ',', // 分割符
blur: function(data){
// console.log(data);
},
selected: function(data, options, e){ // 城市点击时
console.log(data); // data=> {item:{name:'', value:''}, text: [], value: [], separator:','}
console.log(data.item); // current item
console.log(data.text); // all selected text (Array)
console.log(data.value); // all selected value (Array)
console.log(data.separator); // separator
},
error: function(errorThrow){ // 出错
alert(errorThrow); // 错误描述
}
});
// 3. 配置扩展回调方法,selected 、 error 与上面配置方法的结果相同
$('.control-city').on('selected', function(e, data){
console.log('----- trigger event -----');
console.log(data);
}).on('error', function(e, errorThrow){
console.log('----- trigger event -----');
console.error(errorThrow);
});
字母是小写的;
{
"status"=> 接口状态,
"text"=> 错误描述,
"list"=> { => 数组集合
"a": [ => 字母b集合
{
"name"=> 城市名
"value"=> 原始值
"short"=> 拼音首字母
"text"=> 检索字段(拼音首字母城市名)
},
{
"name"=> 城市名
"value"=> 原始值
"short"=> 拼音首字母
"text"=> 检索字段(拼音首字母城市名)
}
],
"b": [ => 字母b集合
{
"name"=> 城市名
"value"=> 原始值
"short"=> 拼音首字母
"text"=> 检索字段(拼音首字母城市名)
}
]
}
}
{
"status": "400",
"text": "出错了"
}
{
"status": "200",
"list": {
"a": [
{
"name": "安庆",
"short": "aq",
"value": "anqing",
"text": "aq 安庆"
},
{
"name": "安阳",
"short": "ay",
"value": "anyang",
"text": "ay 安阳"
}
],
"b": [
{
"name": "北京",
"short": "bj",
"value": "beijing",
"text": "bj 北京"
}
],
"c": [
{
"name": "长沙",
"short": "cs",
"value": "changsha",
"text": "cs 长沙"
}
],
"d": [
{
"name": "大连",
"short": "dl",
"value": "dalian",
"text": "dl 大连"
},
{
"name": "大庆",
"short": "dq",
"value": "daqin",
"text": "dq 大庆"
}
],
"h": [
{
"name": "合肥",
"short": "hf",
"value": "hefei",
"text": "hf 合肥"
}
],
"w": [
{
"name": "武汉",
"short": "wh",
"value": "wuhan",
"text": "wh 武汉"
}
]
}
}