Introduction to commonly used input boxes in layui framework

1. Ordinary input box 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>

2. Auto-complete input box

1. Make sure layui introduces the autoComplete plug-in.

2. Ensure that the initialization code runs in the callback function of layui.use.

3. Introduce 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 data source initialization
needs to be defined in the callback function of layui.use.

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

One is the id of the input box, and the other is the id of the hidden field.
The GetAllSiteByKey public function has been defined in baseUtility.js.

Get its value

// 收集 查询表单数据
var serializeForm = $("#searchForm").formSerialize(true);

This serialization method can get the id value of the hidden field.

Implementation method (reference)

/*
  获取全部的网点
  @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
}

3. Assignment

Whether the input box is ordinary or automatically completed, you can directly assign a value

// 备案网点
$("#txtRegisterCompanyId_editForm").val(registerCompanyName);

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Introduction to commonly used input boxes in layui framework. For more information, please follow other related articles on the PHP Chinese website!