一、普通输入框 input
<div class="layui-form-item"> <label class="layui-form-label"><span class="f_orange">*</span>字段编号</label> <div class="layui-input-block width_250 pos-r"> <input type="text" class="layui-input" name="columncode" lay-verify="required|inputlength_100" placeholder="" autocomplete="off"> <i class="icon_ca_layui"></i> </div></div>
二、自动完成式输入框
1、确保 layui 引入了 autocomplete 插件。
2、确保初始化代码运行于 layui.use 的回调函数里。
3、引入 baseutility.js。
html
@* 备案网点 *@<div class="layui-input-block" style="margin-top:5px; margin-left:320px;"> <label class="layui-form-label">备案网点</label> <div class="layui-input-inline"> <input type="text" id="txtregistercompanyid_searchform" lay-verify="required" style="width:200px;" placeholder="请输入" data-provide="typeahead" class="layui-input" autocomplete="off"> <input type="hidden" name="registercompanyid" id="hiddenregistercompanyid_searchform" /> </div></div>
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框架常用输入框介绍的详细内容。