视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
layui框架常用输入框介绍
2020-11-03 18:24:08 责编:小采
文档


一、普通输入框 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使用教程栏目。

下载本文
显示全文
专题