layui-input-block和layui-input-inline的区别在哪里

发布网友 发布时间：2022-04-29 10:19

我来回答

共2个回答

懂视网 时间：2022-04-29 14:41

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

热心网友 时间：2022-04-29 11:49