jQuery输入下拉模糊匹配插件之----jquery.editable-select

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>

效果图:
在这里插入图片描述
至此,该博文结束。希望对你有所帮助哦!

一切事无法追求完美,唯有追求尽力而为。这样心无压力,出来的结果反而会更好。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值