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

本文链接：https://blog.csdn.net/qq_42773229/article/details/89840276

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>

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