一、普通输入框 input
登录后复制
二、自动完成式输入框
1、确保 layui 引入了 autoComplete 插件。
2、确保初始化代码运行于 layui.use 的回调函数里。
3、引入 baseUtility.js。
HTML
@* 备案网点 *@
登录后复制
js 数据源初始化
需定义在 layui.use 的回调函数中。
// 备案网点siteUtility.GetAllSiteByKey("#txtRegisterCompanyId_searchForm", "#hiddenRegisterCompanyId_searchForm");
登录后复制
一个是输入框的 id， 一个是隐藏域的 id。
该 GetAllSiteByKey 公共函数已定义在 baseUtility.js 中。
获取其值
// 收集 查询表单数据var serializeForm = $("#searchForm").formSerialize(true);
登录后复制
该序列化方法可以获取隐藏域的 id 值。
实现方式（参考）
/* 获取全部的网点 @param txtElementId 输入框Id @param hiddenElementId 与输入框匹配的隐藏域Id */GetAllSiteByKey: function (txtElementId, hiddenElementId) { $(txtElementId).typeahead({ minLength: 0, //items: 'all', source: function (query, process) { var xdata = []; console.group('查询条件 = ' + query); $.ajax({ type: "GET", url: urlEnum.GetAllSiteByKey, async: false, data: { "q": query }, success: function (result) { console.info('GetAllSiteByKey result'); console.info(result); if (result != null && result != undefined) { $.each(result.list, function (i, item) { xdata.push({ id: item.value, name: item.key, obj: item }); }); // end each } }, error: function (XMLHttpRequest, textStatus, errorThrown) { // layer.msg("数据加载失败", { icon: 1 }); }, timeout: 5000 }); console.info('Auto 返回值：'); console.info(xdata); // 如果 Auto 控件被用户置空则同时将隐藏域也置空 if ($(txtElementId).val() == "") { $(hiddenElementId).val(""); } console.groupEnd(); return process(xdata); }, updater: function (item) { console.info('updater = ' + item); console.info(item); $(hiddenElementId).val(item.id); return item; } }); // end typeahead}
登录后复制
三、赋值
无论输入框是普通的还是自动完成的，都可以直接赋值
// 备案网点$("#txtRegisterCompanyId_editForm").val(registerCompanyName);
登录后复制
更多layui知识请关注layui使用教程栏目。
以上就是layui框架常用输入框介绍的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3005865.html
