支持方向上、下键,回车键 // 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 武汉" } ] } }