使用zTree编写代码满足以下要求左边一个检索框，底下一棵树，右边显示选中数据 检索框输入数据后自动更新显示满足条件的数据列表，树要有选择框和展开箭头

以下是使用zTree编写代码满足以上要求的示例：

HTML代码：

<div class="container">
  <div class="search-box">
    <input type="text" id="search-input" placeholder="请输入关键字">
    <button id="search-btn">搜索</button>
  </div>
  <div class="tree-container">
    <ul id="tree" class="ztree"></ul>
  </div>
  <div class="result-container">
    <h3>已选数据:</h3>
    <ul id="result-list"></ul>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
}

.search-box {
  display: flex;
  align-items: center;
}

.search-box input {
  width: 200px;
  height: 30px;
  margin-right: 10px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.search-box button {
  height: 30px;
  padding: 0 10px;
  background-color: #337ab7;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tree-container {
  flex: 1;
  margin-right: 20px;
}

.result-container {
  flex: 1;
}

.result-container h3 {
  margin-top: 0;
}

.result-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

JavaScript代码：

// zTree配置项
var setting = {
  check: {
    enable: true // 显示选择框
  },
  data: {
    simpleData: {
      enable: true
    }
  },
  callback: {
    onCheck: function(event, treeId, treeNode) {
      // 选择节点时更新右侧已选数据列表
      updateResultList();
    }
  }
};

// 树节点数据
var zNodes = [
  { id: 1, pId: 0, name: "父节点1", open: true },
  { id: 11, pId: 1, name: "子节点1" },
  { id: 12, pId: 1, name: "子节点2" },
  { id: 13, pId: 1, name: "子节点3" },
  { id: 2, pId: 0, name: "父节点2", open: true },
  { id: 21, pId: 2, name: "子节点1" },
  { id: 22, pId: 2, name: "子节点2" },
  { id: 23, pId: 2, name: "子节点3" }
];

// 初始化树
var zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);

// 更新右侧已选数据列表
function updateResultList() {
  var nodes = zTreeObj.getCheckedNodes(true);
  var html = "";
  for (var i = 0; i < nodes.length; i++) {
    html += "<li>" + nodes[i].name + "</li>";
  }
  $("#result-list").html(html);
}

// 搜索按钮点击事件
$("#search-btn").click(function() {
  var keyword = $("#search-input").val();
  if (keyword) {
    // 根据关键字过滤节点
    var nodes = zTreeObj.getNodesByParamFuzzy("name", keyword);
    // 展开符合条件的节点
    for (var i = 0; i < nodes.length; i++) {
      zTreeObj.expandNode(nodes[i], true, false, true);
    }
  } else {
    // 清空搜索结果，展开所有节点
    zTreeObj.expandAll(true);
  }
});

说明：

1. HTML结构中包含一个搜索框、一棵树和一个已选数据列表。
2. CSS样式设置了搜索框、树和已选数据列表的样式。
3. JavaScript代码中配置了zTree的相关参数，包括显示选择框、使用简单数据模式和选择节点时更新右侧已选数据列表。
4. 初始化树并将其保存在zTreeObj变量中，方便后续操作。
5. updateResultList函数用于更新右侧已选数据列表，先获取所有已选择的节点，然后将它们的名称拼接成HTML字符串并插入到列表中。
6. 搜索按钮点击事件中，先获取搜索框中的关键字，然后使用getNodesByParamFuzzy方法根据名称模糊匹配节点，得到符合条件的节点数组。接下来遍历符合条件的节点数组，使用expandNode方法展开节点。如果搜索框为空，则清空搜索结果并展开所有节点。