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

﹏ヽ暗。殇╰゛Y 2022-02-05 07:21 1238阅读 0赞

**jquery.editable-select**

一、简介：  
       由于项目业务需求：需要在用户输入时下拉匹配数据库中已有的数据源，或者手动输入即可；

二、插件的使用：  
       可直接去[github（文件Demo地址）][github_Demo]上面下载本人已上传的资源文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzczMjI5_size_16_color_FFFFFF_t_70]  
三、属性(properties)：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
   <th>值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>filter</td> 
   <td>选择option以后。</td> 
   <td>Boolean, 默认 true。</td> 
  </tr> 
  <tr> 
   <td>effects</td> 
   <td>点击的时候，下拉框的过渡效果。</td> 
   <td>有default，slide，fade三个值，默认是default。</td> 
  </tr> 
  <tr> 
   <td>duration</td> 
   <td>过渡效果时间。</td> 
   <td>默认是fast,值可以是fast和slow，也可以是数字。</td> 
  </tr> 
  <tr> 
   <td>appendTo</td> 
   <td>下拉框如果弹出框效果，这个值才会用到，显示把它加载到哪里。</td> 
   <td>~</td> 
  </tr> 
  <tr> 
   <td>trigger</td> 
   <td>下拉框列表如何触发。</td> 
   <td>值是"focus", “manual” 默认是focus</td> 
  </tr> 
 </tbody> 
</table>

四、方法(method)：

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onCreate</td> 
   <td>当editableSelect方法生效时触发。</td> 
  </tr> 
  <tr> 
   <td>onShow</td> 
   <td>当下拉框出现时触发。</td> 
  </tr> 
  <tr> 
   <td>onHide</td> 
   <td>当下拉框隐藏时触发 。</td> 
  </tr> 
  <tr> 
   <td>onSelect</td> 
   <td>当下拉框中的选项被选中时触发。注意：该方法有一个回调函数中的参数：function(obj){ … }</td> 
  </tr> 
 </tbody> 
</table>

五：使用(example-code)：  
需要引入的文件：

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 代码：

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

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

[github_Demo]: https://github.com/1831412916/jquery.editable-select
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzczMjI5_size_16_color_FFFFFF_t_70]: /images/20220205/b8428042bf4e4d29afb4a54125238b88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzczMjI5_size_16_color_FFFFFF_t_70 1]: /images/20220205/0fcc645aa55744f0bd0810b28a26149c.png