Introduction to commonly used input boxes in layui framework-Layui Tutorial-php.cn

Introduction to commonly used input boxes in layui framework

尚

Release： 2019-12-03 16:47:56

forward

11072 people have browsed it

Introduction to commonly used input boxes in layui framework

1. Ordinary input box input

Introduction to commonly used input boxes in layui framework

<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>

Copy after login

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.

Introduction to commonly used input boxes in layui framework

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>

Copy after login

js data source initialization
needs to be defined in the callback function of layui.use.

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

Copy after login

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);

Copy after login

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: &#39;all&#39;,
        source: function (query, process) {
            var xdata = [];
            console.group(&#39;查询条件 = &#39; + query);

            $.ajax({
                type: "GET",
                url: urlEnum.GetAllSiteByKey,
                async: false,
                data: { "q": query },
                success: function (result) {
                    console.info(&#39;GetAllSiteByKey result&#39;);
                    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(&#39;Auto 返回值：&#39;);
            console.info(xdata);

            // 如果 Auto 控件被用户置空则同时将隐藏域也置空
            if ($(txtElementId).val() == "") {
                $(hiddenElementId).val("");
            }

            console.groupEnd();
            return process(xdata);
        },
        updater: function (item) {
            console.info(&#39;updater = &#39; + item);
            console.info(item);

            $(hiddenElementId).val(item.id);

            return item;
        }
    }); // end typeahead
}

Copy after login

3. Assignment

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

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

Copy after login

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!