组件 layui 常用控件输入框

组件 layui 常用控件输入框_第1张图片

一、普通输入框 input

组件 layui 常用控件输入框_第2张图片

二、自动完成式输入框

  1. 确保 layui 引入了 autoComplete 插件。
  2. 确保初始化代码运行于 layui.use 的回调函数里。
  3. 引入 baseUtility.js。

组件 layui 常用控件输入框_第3张图片

  1. HTML
@* 备案网点 *@
  1. js 数据源初始化
    需定义在 layui.use 的回调函数中。
// 备案网点
siteUtility.GetAllSiteByKey("#txtRegisterCompanyId_searchForm", "#hiddenRegisterCompanyId_searchForm");

一个是输入框的 id, 一个是隐藏域的 id。
该 GetAllSiteByKey 公共函数已定义在 baseUtility.js 中。

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

该序列化方法可以获取隐藏域的 id 值。

  1. 实现方式(参考)
/*
  获取全部的网点
  @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);

转载于:https://www.cnblogs.com/ramantic/p/7659313.html

你可能感兴趣的:(javascript,json)