yutons_sug搜索框提示插件||输入框提示插件

分享 未结
19 208
yutons
yutons 2018-10-6
悬赏:20飞吻
因工作需要制作了一个‘搜索框提示插件||输入框提示插件’,欢迎大家吐槽!
先来一张操作图


实用方法:
//引入自定义插件
layui.config({
base: '../../static/common/yutons-mods/' //设置自定义插件路径:根据实际路径进行设置
}).use(['yutons_sug'], function() {
//创建yutons_sug搜索框提示插件||输入框提示插件实例
var yutons_sug = layui.yutons_sug;


//初始化姓名输入提示框
yutons_sug.render({
id: "userName", //设置容器唯一id
cols: [
[{
field: 'userName',
title: '员工姓名'
}, {
field: 'userCode',
title: '员工工号'
}, {
field: 'deptName',
title: '所属部门'
}]
], //设置表头
type: 'sugTable', //设置输入框提示类型:sug-下拉框,sugTable-下拉表格
url: "json/yutons_sug.json" //设置异步数据接口,url为必填项
});

//初始化工号输入提示框
yutons_sug.render({
id: "userCode", //设置容器唯一id
cols: [
[{
field: 'userName',
title: '员工姓名'
}, {
field: 'userCode',
title: '员工工号'
}, {
field: 'deptName',
title: '所属部门'
}]
], //设置表头
type: 'sugTable', //设置输入框提示类型:sug-下拉框,sugTable-下拉表格
url: "json/yutons_sug.json" //设置异步数据接口,url为必填项
});

//初始化部门输入提示框
yutons_sug.render({
id: "deptName", //设置容器唯一id
type: 'sug', //设置输入框提示类型:sug-下拉框,sugTable-下拉表格
url: "json/yutons_sug.json" //设置异步数据接口,url为必填项
});
});
体验地址: https://yutons.gitee.io/yutons-mods/templates/sug/yutons_sug.html
下载地址: https://gitee.com/yutons/yutons-mods.git
回帖
  • 能上下回车键选择就好了
    0 回复
  • yutons
    2018-10-6
    @日後再說 下拉table无法上下键,下拉框可以上下键选择
    0 回复
  • yutons
    2018-10-6
    @日後再說 在后续升级版本中会考虑下拉table方式实现上下键和回车键选中
    0 回复
  • 我的
    2018-10-9


    你好,我按照你的demo做了个练习,但是没有出现下来框的数据,你能帮我看下是哪里写错了吗?
    0 回复
  • 有丶东西
    2018-10-10
    点了下拉框不应该是把员工工号 所属部分都填充的嘛?不然你这个有什么意义呢
    0 回复
  • ruby_y
    2018-10-10
    默认为get请求?POST请求呢?
    0 回复
  • yutons
    2018-10-11
    @ruby_y get请求
    0 回复
  • yutons
    2018-10-11
    @有丶东西 我做这个是为了做一个通用性的搜索提示框,而不是输入一项,其他项自动填充,如果有需要可以修改源码[害羞]
    0 回复
  • yutons
    2018-10-11
    @我的 按f12进行debug
    0 回复
  • 有一个问题:
    当input框的id与返回的json数据格式的键值不一致的时候,会导致双击获取不到数据;如下代码
           //初始化用户名输入提示框
    yutons_sug.render({
    id: 'my_username', // 此处为自定义的inputID
    url: 'sys/user/page' + "?username=" + $(this).val(),
    request: {
    pageName: "current", // 页码的参数名称,默认:page
    limitName: "pageSize" //每页数据量的参数名,默认:limit
    },
    response: {
    statusCode: 200 //规定成功的状态码,默认:0
    },
    cols: [[
    {field: 'username', title: '用户名'}, // 此处为数据返回格式中的键名
    {field: 'name', title: '姓名'}
    ]],
    type: 'sugTable' //设置输入框提示类型:sug-下拉框,sugTable-下拉表格
    });
    这里input输入框是需要获取到用户username,但是我把input输入框id设置为了my_username,当input的id和cols中的field不一致,导致双击无法把值设置进去了,,,建议可以支持别名
    0 回复
  • 我简单的改了一下源码91行
                    //监听下拉表格行单击事件(单击||双击事件为:row||rowDouble)设置单击或双击选中对应的行
    table.on('rowDouble(' + "yutons_sug_" + opt.id + ')', function(obj) {
    //获取选中行所传入字段的值
    $("#" + opt.id).val(obj.data[opt.cols[0][0].field]);
    $("#" + opt.id).next().hide().html("");
    });
    配置项的第一个将会被作为选中值写入input框
    0 回复
  • 还有一个问题,比如在数据表格上面放一个搜索框,如果table有表头工具栏,并且和搜索框离得比较近,会发现,搜索框的下拉列表,在表头工具栏的下面去了,也就是说呗表头工具栏遮住了,导致一部分数据看不见.这个应该是个bug吧
    0 回复
  • yutons
    5天前
    @咸鱼到碗里来 此处id
    应和input标签中的id一致
    0 回复
  • yutons
    5天前
    @咸鱼到碗里来 数据表格中添加搜索框没有意义,在input输入框输入数据的同时已经查询到最新数据
    0 回复
  • 我是说像是百度的那种一样,在第一行放一个input搜索和按钮,,在input按钮下面放一个数据表格,当在input中搜索的时候,候选框的内容会被数据表格的表头工具栏遮住一部分.
    0 回复
  • yutons
    4天前
    @咸鱼到碗里来 你截个图我看看
    嘿嘿
    0 回复
  • layui.each(data.data, (index, item) => 老哥,这句话ie浏览器不认识啊
    0 回复
  • yutons
    2天前
    @段子手阿菜 你用的ie吧,回头我把es6的写法攺成es5的
    0 回复
  • @yutons 好的,还有我用的时候title里面赋值了,为啥下拉表格没有标题呢
    0 回复