客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称：selectInput开源软件地址：https://gitee.com/JerryZst/select-input开源软件介绍：selectInput2.0版本已出，如果需要可以移步到到 select-input2.x，全新的开发模式，更全面的功能，强烈推荐2.0版本，2.0版本带数据列表分页功能这是个啥？selectInput 是将input框变成即可输入亦可选择的select下拉组件，主要使用场景是用户可以输入关键词，匹配系统存在的联想词形成select下拉框以供用户选择，当然用户也可以使用自行输入的信息，支持模糊匹配，数据源可以本地赋值，也可以异步url请求加载，或者干脆点直接实时输入远程请求联想呈现
怎么使用呢?
代码片段
配置扩展layui .config({ base: "./modules/", }) .extend({ selectInput: "selectInput/selectInput", });引入扩展并使用HTML 部分 <div class="layui-form-item"> <div class="layui-input-block" id="test1"></div> </div>Javascript 部分layui.use(["selectInput"], function () { var selectInput = layui.selectInput; // 全量参数版本 var ins = selectInput.render({ // 容器id，必传参数 elem: '#test1', name: 'test', // 渲染的input的name值 layFilter: 'test', //同layui form参数lay-filter layVerify: 'required', //同layui form参数lay-verify layVerType: 'tips', // 同layui form参数lay-verType layReqText: '请填写文本', //同layui form参数lay-ReqText initValue: 'iPhone12 Pro Max', // 渲染初始化默认值 hasSelectIcon: false, placeholder: '请输入名称', // 渲染的inputplaceholder值 // 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样 data: [ {value: 1111, name: 1111}, {value: 2333, name: 2222}, {value: 2333, name: 2333}, {value: 2333, name: 2333}, ], url: "https://www.layui.com/", // 异步加载的url，异步加载联想词的数组值，设置url，data参数赋的值将会无效，url和data参数两者不要同时设置 remoteSearch: false, // 是否启用远程搜索 默认是false，和远程搜索回调保存同步 parseData: function (data) { // 此参数仅在异步加载data数据下或者远程搜索模式下有效，解析回调，如果你的异步返回的data不是上述的data格式，请在此回调格式成对应的数据格式，回调参数是异步加载的数据 }, error: function (error) { // 异步加载出错的回调 回调参数是错误msg }, done: function (data) { // 异步加载成功后的回调 回调参数加载返回数据 }, remoteMethod: function (value, cb) { // 远程搜索的回调函数 // value 是input实施输入的value值 // cb是回调处理函数，请在执行ajax搜索请求成功之后执行此回调函数 //案例 //这里如果val为空, 则不触发搜索 if (!value) { return cb([]); } //这里的$.ajax去请求后台拿回数据 $.ajax({ method: 'get', url: 'https://your.domain/search', data: { keyword: val, }, success: function (data) { // 此处最好直接返回取你返回的 data属性，如：data.data，这样不限制你后端返回的数据对象格式，如果整体传参，必须满足：{"code":0,"msg":"success","data":[]} return cb(data) } }) } } }); // 如果使用本地数据加载，不要使用设置远程 url参数 完整的本地赋值数据案例 var ins = selectInput.render({ elem: '#test1', data: [ {value: 1111, name: 1111}, {value: 2333, name: 2222}, {value: 2333, name: 2333}, {value: 2333, name: 2333}, ], placeholder: '请输入名称', name: 'list_common', remoteSearch: false }); // 监听input 实时输入事件 ins.on('itemInput(test1)', function (obj) { console.log(obj); }); // 监听select 选择事件 ins.on('itemSelect(test1)', function (obj) { console.log(obj); }); // 动态添加select选项，第二个默认为false，即为覆盖data重载，true为push追加 ins.addSelect([ {value: 1111, name: 1111}, {value: 2333, name: 2222}, {value: 2333, name: 2333}, {value: 2333, name: 2333}, {value: 6666, name: 9999}, {value: 8888, name: 101010}, ],false); // 获取选中的value值 var selectValue = ins.getValue(); // 清空输入框的value值 ins.emptyValue(); });文档你可以点击 在线文档 开始阅读文档, 如果你已经拉取了完整的项目, 可以在本地直接打开 小的Tips
加url的那种异步加载适用的场景是：你的data数据需要在页面渲染的时候异步加载请求后台拿到数据，然后后续搜索是基于这个数据进行前端搜索的,所以url异步加载和data赋值模式两者互斥，而远程实时搜索这种和url异步加载/data赋值模式两者是互斥的，本质上url异步加载和data直接赋值都是前端基于已有的数据进行搜索，而远程实时搜索，前端不参与搜索匹配，而会调用你完成的remoteMethod远程搜索函数去后台搜索完后返回一个data列表渲染；parseData解析回调仅在url异步加载和远程实时搜索的时候有效，如果设置了，必须返回数据，否则页面无法进行搜索显示功能** 支持作者最简单的粗暴的方式就是直接使用你们的钞能力, 当然这是您自愿的! 点击可直接查看大图 赞赏通道   当然, 如果客观条件不允许或者主观上不愿意, 也没啥关系嘛! 码农的钱挣得都是辛苦钱啊. 所以除了使用 钞能力, 你还可以通过以下方式支持作者!
 |
请发表评论