jQuery.Slwy.Selector plugin
绑定元素为select
//html
<select name="select" id="Airline">
<option value="CA" data-right="CA" disabled>中国国际航空</option>
<option value="MU" data-right="MU">东方航空</option>
<option value="CZ">南方航空</option>
<option value="FM" disabled>上海航空</option>
</select>
//JS
$('select#Airline').SlwySelector({
//title: '支持中文|代码搜索',//自定义标题
//titleBar: false,//是否显示标题栏
// data: data,//自定义数据
//showField: 'CarrierName',//需要展示的自定义数据字段名
showRight: true,//是否显示右侧字段
//showRightFiled: 'CarrierCode',//需要展示的右侧自定义数据字段名
search: true,//是否显示搜索
searchPlaceholder: '搜索航空公司'//搜索栏placeholder
})
//选择事件
/*.on('selected', function (e) {
console.log(e.value)
})*/
绑定有optgroup的select
//html
<select name="select" id="Airline2">
<optgroup label="国内航空公司">
<option value="CA" data-right="CA" disabled>中国国际航空</option>
<option value="MU" data-right="MU">东方航空</option>
<option value="CZ">南方航空</option>
<option value="FM" disabled>上海航空</option>
</optgroup>
<optgroup label="国外航空公司">
<option value="IR" data-right="IR">伊朗航空公司</option>
<option value="IT" data-right="IT">法国国内航空公司</option>
<option value="J2" data-right="J2">阿塞拜疆航空公司</option>
</optgroup>
</select>
//JS
$('select#Airline').SlwySelector({
//title: '支持中文|代码搜索',//自定义标题
//titleBar: false,//是否显示标题栏
// data: data,//自定义数据
//showField: 'CarrierName',//需要展示的自定义数据字段名
showRight: true,//是否显示右侧字段
//showRightFiled: 'CarrierCode',//需要展示的右侧自定义数据字段名
search: true,//是否显示搜索
searchPlaceholder: '搜索航空公司'//搜索栏placeholder
})
//选择事件
/*.on('selected', function (e) {
console.log(e.value)
})*/
绑定元素为input
//html
<input type="text" id="Airline2" placeholder="选填(中文/代码)">
//JS
$('input#Airline2').SlwySelector({
title: '支持中文|代码搜索',//自定义标题
titleBar: true,//是否显示标题栏
data: data,//自定义数据
showField: 'CarrierName',//需要展示的自定义数据字段名
showRight: true,//是否显示右侧字段
showRightFiled: 'CarrierCode',//需要展示的右侧自定义数据字段名
search: true,//是否显示搜索
searchPlaceholder: '搜索航空公司'//搜索栏placeholder
})
//选择事件
/*.on('selected', function (e) {
console.log(e.value)
})*/