Simple and perfect HTML combox.
##一、功能:
给定文本框id,设置数据,以及一些简单的配置项(可省略),即可使文本框具有下拉列表的效果,支持手机端。
功能与Html5 的datalist类似,但更强大,而且支持所有浏览器。依赖于Jquery,支持动态html页面。
##二、使用说明:
###1. 引用JS
在页面中引用Jquery,以及SimCombox.js。
###2. 在script中定义SibCombox即可
$("#inputbox_id").SimCombox(data,setting);
参数说明:
inputbox_id---- 输入框的id
data ---- 需要在下拉列表中显示的数据,如
显示一列数据 ['item1','item2','item3']
显示多列数据 [
['item11','item12','item13'],
['item21','item22','item23'],
['item31','item32','item33']
]
或 [
{key1:'value11',key2:'value12',key3:'value13'},
{key1:'value21',key2:'value22',key3:'value23'},
{key1:'value31',key2:'value32',key3:'value33'}
]
setting --- 参数
{
allowNew:true, //输入框中是否允许输入不包含在列表中的数据
maxHeight:180, //输入框显示的最大高度,单位为px
text:'key1', //如果为多列数据,则指出输入框中需要的列,
// 如果为空则将全部列值显示(逗号分隔,如"value1,value2,value3")
hide:['key2','key3'] //如果为多列数据,则指出需要被隐藏的列,默认为空数组
onclick: function(e,data){ //列表选项被选中后的回调函数 onClickFun(e,data),默认为空函数
//参数 e : 当前被点击的行对象,为表格的一行 ...
//参数 data : 被点击行所对应的输入参数dataArray中的数据,
// 如 'item1' 或 ['item11','item12','item13'] 或
// {key1:'value11',key2:'value12',key3:'value13'}
}
}
###3. Demo
假设页面中有id=inputbox的输入框
####(1) 基本使用
$("#inputbox").SimCombox(['item1','item2','item3']);
####(2) 三列数据,第一列为需要输入的数据,并且在列表中隐藏,点击后alert对应的数据
$("#inputbox").SimCombox(
[
['item11','item12','item13'],
['item21','item22','item23'],
['item31','item32','item33']
],
{
text: '0',hide:['0'],
onclick:function(e,data){
alert(data);
}
}
);
####(3) 三列数据第key1列为需要输入的数据,key2列在列表中隐藏,列表最大高度300px,不允许用户自主输入数据
$("#inputbox").SimCombox(
[
{key1:'value11',key2:'value12',key3:'value13'},
{key1:'value21',key2:'value22',key3:'value23'},
{key1:'value31',key2:'value32',key3:'value33'}
],
{text: 'key1',hide:['key2'],maxHeight:300,allowNew:false}
);