layui点击文本输入框调起弹出选择框并选择内容的两种方法参考

    <!--计量器具弹出层-->
    <div id="equipment" lay-filter="equipment" style="display: none">
        <table id="equipment_result" lay-filter="equipment_result"></table>
    </div>
    
    <!-- 添加 弹出计量器具表格的 tool（里面的按钮）-->
    <script type="text/html" id="equipment-table-tool">
       <a class="layui-btn layui-btn-xs" lay-event="select">选择</a>
   </script>
   <div class="layui-form-item layui-hide">
       <label class="layui-form-label">名称</label>
       <div class="layui-input-block">
           <input ts-selected="1" type="text" id="EQUIPMENTNAME" name="EQUIPMENTNAME" class="layui-input">
           <input type="hidden" id="EQUIPMENTID" name="EQUIPMENTID" class="layui-input">
       </div>
   </div>

// part 1: 为全局变量赋值
 var form = layui.form,
        $ = layui.$,
           iconPickerFa = layui.iconPickerFa,
            common = layui.common,
            commonTable = layui.commonTable,
            table = layui.table,
            tableSelect = layui.tableSelect,
            laydate = layui.laydate;
         // part 2: 让layui渲染页面
        table.render(equipment_result_table_options); 
        // part 3: 让 layui 为页面的元素绑定事件处理函数  为页面上的table上的tool绑定事件处理函数
        table.on('tool(equipment_result)', equipment_tool_event_handler); 
        // part 4: 为输入框绑定光标聚焦事件的触发该函数，
        $('#EQUIPMENTNAME').on("click",equipment_input_focus_handler);
        //页面上隐藏的用于弹层的所有的列表的相关设置
        function equipment_result_table_options()
        {
            debugger;
            commonTable.rendertable({
                elem: '#equipment_result',
                id: 'equipment_result',
                url: '/EquipmentManage/Equipment/GetJson',
                title: '计量器具表',
                toolbar: false,//工具条不显示
                page: false,//分页栏不显示
                cols: [[
                    { field: 'KEY_DEVICECODE', title: '点值', width: 160 },
                    { field: 'NAME', title: '计量器具名称', width: 200 },
                    { fixed: '', title: '操作', toolbar: '#equipment-table-tool', width: 80 }
                ]]
            })
        }
        // “计量器具”输入框的光标聚焦事件的触发函数， 弹出弹层，弹层上显示所有的计量器具，以供选择。
        function equipment_input_focus_handler() {
            layer.open({
                type: 1,
                area: ['440px', '500px'],
                content: $('#equipment'),
                success: function () {
                    // 重新加载表格中的数据
                    //table.reload('equipment_result', equipment_result_table_options);
                    $('#equipment').css('display', 'block');
                    equipment_result_table_options();
                }
            });
        }
        //点击弹出的“选择”弹层上的表格中“选中”按钮的触发函数
        function equipment_tool_event_handler(obj) {
            console.info(obj);
            var data = obj.data;
            switch (obj.event) {
                case 'select':
                    $('#EQUIPMENTNAME').val(data.NAME);
                    $('#EQUIPMENTID').val(data.ID);
                    layer.close(layer.index);
                    break;
            }
        }     

<input type="text" ts-selected="1" id="EQUIPMENTNAME" name="EQUIPMENTNAME" class="layui-input">

layui.use([ 'tableSelect'], function () {
        var form = layui.form,
            $ = layui.$,
            tableSelect = layui.tableSelect；
     tableSelect.render({
           elem: '#EQUIPMENTNAME',//定义输入框input对象 必填
           checkedKey: 'EQUIPMENTNAME',//表格的唯一建值，非常重要，影响到选中状态 必填
           searchKey: 'keyword',	//搜索输入框的name值 默认keyword
           searchPlaceholder: '关键词搜索',//搜索输入框的提示文字 默认关键词搜索
           table: {
               url: '/EquipmentManage/Equipment/GetJson',
               cols: [[
                   { type: 'radio' },
                   { field: 'CODE', title: '编号', width: 135 },
                   { field: 'KEY_DEVICECODE', title: '点值', width: 135 },
                   { field: 'NAME', title: '计量器具名称', width: 135 },
                   //{ fixed: '', title: '操作', toolbar: '#equipment-table-tool', width: 80 }
               ]]
           },
           done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
               $('#EQUIPMENTNAME').val(data.data[0].NAME);
               $('#EQUIPMENTID').val(data.data[0].ID);
           }
       })