jQuery输入下拉模糊匹配插件之 |
您所在的位置：网站首页 › 什么叫模糊匹配 › jQuery输入下拉模糊匹配插件之 |
jQuery输入下拉模糊匹配插件之
|
jquery.editable-select 一、简介： 由于项目业务需求：需要在用户输入时下拉匹配数据库中已有的数据源，或者手动输入即可； 二、插件的使用： 可直接去github（文件Demo地址）上面下载本人已上传的资源文件。 四、方法(method)： 名称描述onCreate当editableSelect方法生效时触发。onShow当下拉框出现时触发。onHide当下拉框隐藏时触发 。onSelect当下拉框中的选项被选中时触发。注意：该方法有一个回调函数中的参数：function(obj){ … }五：使用(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('' + r["name"] + ''); }); $('#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 代码： 效果图： 一切事无法追求完美，唯有追求尽力而为。这样心无压力，出来的结果反而会更好。 |
三、属性(properties)：
至此，该博文结束。希望对你有所帮助哦！【本文地址】