layui框架常用输入框介绍

一、普通输入框 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>

// 备案网点 siteUtility.GetAllSiteByKey("#txtRegisterCompanyId_searchForm", "#hiddenRegisterCompanyId_searchForm");

获取其值

// 收集 查询表单数据 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框架常用输入框介绍的详细内容，更多内容请关注技术你好其它相关文章！