城市选择器


支持方向上、下键,回车键 



// 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
	},
	clear: function(e){
		console.log('clear');
	},
	error: function(errorThrow){ // 出错
		alert(errorThrow); // 错误描述
	}
});



// 3. 配置扩展回调方法,selected 、 error 与上面配置方法的结果相同
$('.control-city').on('selected', function(e, data, options){
	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 武汉"
			}
		]
	}
}