layui 第三方组件平台

返回首页 发布组件

简单实用的搜索框或输入框提示插件(参考百度搜索框提示)

文档

日期:2018-10-08
版本:v1.0.1
yutons_sug插件升级版本1.0.1
1.默认分页3条每页
2.修改url支持条件查询:在url基础上添加+ "?params="即可
先来一张操作图


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

sessionStorage.setItem("url", "json/yutons_sug.json");

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

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

//初始化部门输入提示框
yutons_sug.render({
id: "deptName", //设置容器唯一id
type: 'sug', //设置输入框提示类型:sug-下拉框,sugTable-下拉表格
url: sessionStorage.getItem("url") + "?params=" //设置异步数据接口,url为必填项
});
});
体验地址: https://yutons.gitee.io/yutons-mods/templates/sug/yutons_sug.html