layui的input标签点击下拉树形

您好！要实现在点击 input 标签时弹出下拉树形菜单，可以使用 layui 的 tree 组件结合 input 组件来实现。下面是一个简单的示例代码：

HTML：

<div class="layui-input-inline">
  <input type="text" id="treeInput" lay-verify="required" placeholder="点击选择" autocomplete="off" class="layui-input">
</div>
<div id="treeSelect" class="ztree" style="display: none;"></div>

JavaScript：

layui.use(['tree', 'form'], function() {
  var tree = layui.tree;
  var form = layui.form;
  
  // 模拟的下拉树形数据
  var treeData = [
    {
      name: "节点1",
      id: 1,
      children: [
        {
          name: "节点1.1",
          id: 11
        },
        {
          name: "节点1.2",
          id: 12
        }
      ]
    },
    {
      name: "节点2",
      id: 2,
      children: [
        {
          name: "节点2.1",
          id: 21
        },
        {
          name: "节点2.2",
          id: 22
        }
      ]
    }
  ];
  
  // 渲染树形菜单
  tree.render({
    elem: '#treeSelect',
    data: treeData,
    showLine: true,
    click: function(obj) {
      var node = obj.data;
      // 点击树节点时将节点名称赋值给 input 标签
      $('#treeInput').val(node.name);
      // 隐藏树形菜单
      $('#treeSelect').hide();
    }
  });
  
  // 点击 input 标签时显示树形菜单
  $('#treeInput').on('click', function() {
    var inputOffset = $(this).offset();
    $('#treeSelect').css({
      left: inputOffset.left + 'px',
      top: (inputOffset.top + $(this).outerHeight()) + 'px'
    }).show();
  });
  
  // 点击其他地方隐藏树形菜单
  $(document).on('click', function(e) {
    if (!$(e.target).is('#treeInput') && !$(e.target).is('#treeSelect')) {
      $('#treeSelect').hide();
    }
  });
});

在上面的代码中，我们使用 layui 的 tree 组件来渲染树形菜单，通过点击树节点将节点名称赋值给 input 标签，并隐藏树形菜单。点击 input 标签时，树形菜单会显示在 input 下方，点击其他地方则会隐藏树形菜单。

请注意，这只是一个简单示例，您可能需要根据实际需求进行进一步的定制和调整。希望对您有帮助！如果您还有任何问题，请随时提问。