layui當點擊文本框時彈出選擇框,顯示選擇內容的例子

<div id="hidden1" lay-filter="hidden1" style="display: none">
 <table id="department_result" lay-filter="department_result"></table>
</div>

<!-- 添加 彈出部門表格的 tool（里面的按鈕）
<script type="text/html" id="hidden1-table-tool">
 <a class="layui-btn layui-btn-xs" lay-event="select">選擇</a>
</script>

// 定義全局變量. employee.js 中要用到
var $, admin, table, layer, laydate, form; 
var context_path = '/layui-curd';

layui.config({
 base: context_path + '/layuiadmin/'
}).extend({
 index : 'lib/index'
}).use([ 'table', 'layer', 'laydate', 'form' ], function() {

 // part 1: 為全局變量賦值
 $ = layui.$, 
 admin = layui.admin, 
 table = layui.table, 
 layer = layui.layer, 
 laydate = layui.laydate, 
 form = layui.form; 
 
 // part 2: 讓layui渲染頁面
 table.render(department_result_table_options); // 渲染頁面上的table. table中 的數據是通過 ajax 請求從后臺獲取。

 // part 3: 讓 layui 為頁面的元素綁定事件處理函數
 table.on('tool(department_result)', department_tool_event_handler); // 為頁面上的table上的tool綁定事件處理函數
 
 // part 4: 為輸入框綁定光標聚焦事件的觸發該函數，
 $('#dname').focus(depart_input_focus_handler);
});

//頁面上隱藏的用于彈層的所有客戶的列表的相關設置
var department_result_table_options = {
 elem: '#department_result'
 ,url: context_path + '/api/department'
 ,method : 'get' 
 ,response : { 
 statusName : 'code' 
 ,statusCode : 200
 ,msgName : 'msg' 
 ,countName : 'count' 
 ,dataName : 'data'
 }
 ,title : '部門列表' 
 ,cols : [ [ 
 { field : 'deptno', title : '部門編號', width : 100}
 ,{ field : 'dname', title : '部門名稱', width : 150 }
 ,{ field : 'loc', title : '所在地', width : 150 }
 ,{ fixed : 'right', title : '操作', toolbar : '#hidden1-table-tool', width : 80 } ] ]
};

// “客戶”輸入框的光標聚焦事件的觸發函數， 彈出彈層，彈層上顯示所有的客戶，以供選擇。
function depart_input_focus_handler() {
 layer.open({
 type : 1
 , area : [ '600px', '450px' ]
 , content : $('#hidden1')
 , success : function () {
 // 重新加載表格中的數據
 table.reload('department_result', department_result_table_options);
 $('#hidden1').css('display', 'block');
 }
 });
}

//點擊彈出的“客戶信息”彈層上的表格中“選中”按鈕的觸發函數
function department_tool_event_handler(obj) {
 console.info(obj);
 var data = obj.data;
 switch (obj.event) {
 case 'select':
 $('#dname').val(data.dname);
 layer.close(layer.index);
 break;
 }
}