jquery.editable-select
一、简介:
由于项目业务需求:需要在用户输入时下拉匹配数据库中已有的数据源,或者手动输入即可;
二、插件的使用:
可直接去github(文件Demo地址)上面下载本人已上传的资源文件。
三、属性(properties):
名称 | 描述 | 值 |
---|---|---|
filter | 选择option以后。 | Boolean, 默认 true。 |
effects | 点击的时候,下拉框的过渡效果。 | 有default,slide,fade三个值,默认是default。 |
duration | 过渡效果时间。 | 默认是fast,值可以是fast和slow,也可以是数字。 |
appendTo | 下拉框如果弹出框效果,这个值才会用到,显示把它加载到哪里。 | ~ |
trigger | 下拉框列表如何触发。 | 值是"focus", “manual” 默认是focus |
四、方法(method):
名称 | 描述 |
---|---|
onCreate | 当editableSelect方法生效时触发。 |
onShow | 当下拉框出现时触发。 |
onHide | 当下拉框隐藏时触发 。 |
onSelect | 当下拉框中的选项被选中时触发。注意:该方法有一个回调函数中的参数:function(obj){ … } |
五:使用(example-code):
需要引入的文件:
<script src="Content/jQuery/jquery-2.1.1.min.js"></script>
<link href="Content/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="Content/bootstrap/bootstrap.js"></script>
<link href="Content/jquery.editable-select/jquery.editable-select.min.css" rel="stylesheet" />
<script src="Content/jquery.editable-select/jquery.editable-select.min.js"></script>
jQuery代码:
$(function () {
var data = [
{ 'id': 1, 'name': '测试数据1' },
{ 'id': 2, 'name': '测试数据2' },
{ 'id': 3, 'name': '测试数据3' },
{ 'id': 4, 'name': '测试数据4' },
{ 'id': 5, 'name': '测试数据5' },
{ 'id': 6, 'name': '测试数据6' },
{ 'id': 7, 'name': '测试数据7' }
];
$.each(data, function (i, r) {
$('#editable-select').append('<option data-id="' + r["id"] + '">' + r["name"] + '</option>');
});
$('#editable-select').editableSelect({
effects: 'slide',//点击的时候,下拉框的过渡效果 有default,slide,fade三个值,默认是default
filter: true,//选择option以后,是否过滤 默认 true
duration: 'fast',//下拉选项框展示的过度动画速度
onSelect: function (obj) {
console.log("下拉框选项被选中");
var id = $(obj).attr('data-id');//获取当前数据的id
var name = $(obj).text();//获取当前数据的name
console.info(id + '===' + name);
},
onCreate: function () {
console.log("下拉框创建");
},
onShow: function() {
console.log("下拉框显示");
},
onHide: function() {
console.log("下拉框隐藏");
}
});
})
Html5 代码:
<body>
<div style="width:200px;height:200px;text-align:center;margin:200px 40% auto;border:none;">
<select id="editable-select" class="form-control es-input"></select>
</div>
</body>
效果图:
至此,该博文结束。希望对你有所帮助哦!
一切事无法追求完美,唯有追求尽力而为。这样心无压力,出来的结果反而会更好。