首頁 >web前端 >Layui教程 > 正文

layui框架常用輸入框介紹

轉載2019-12-03 16:47:5601113
phpStudy Linux 面板(小皮面板)

一、普通輸入框 input

1.jpg

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

2.jpg

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使用教程欄目。

以上就是layui框架常用輸入框介紹的詳細內容,更多請關注php中文網其它相關文章!

php中文網最新課程二維碼
  • 相關標簽:layui
  • 本文轉載于:博客園,如有侵犯,請聯系[email protected]刪除
  • 相關文章

    相關視頻


    網友評論

    文明上網理性發言,請遵守 新聞評論服務協議

    我要評論
  • 專題推薦

    推薦視頻教程
  • layUI前端框架使用詳解layUI前端框架使用詳解
  • 前端UI框架 — layui前端UI框架 — layui
  • 視頻教程分類
    118期四肖中特唯一