在Observable Framework中实现CSV数据搜索与表格展示遇阻求助

问题根源 #

1. FileAttachment.csv()返回的是Promise对象，而非直接的数组数据，不能直接传给Inputs.search。
2. 未指定搜索目标字段，默认全局搜索可能不符合你要搜索职位标题的需求。
3. 表格组件未正确绑定搜索后的响应式结果。

修正后的代码 #

// 等待CSV数据加载完成，获取实际数组
const salaries = await FileAttachment("./data/test.csv").csv({typed: true});

// 创建搜索输入框，指定仅搜索「APPOINTMENT TITLE」字段
const searchInput = Inputs.search(salaries, {
  placeholder: "Search titles",
  // 自定义搜索逻辑：忽略大小写匹配职位标题
  search: (item, term) => item["APPOINTMENT TITLE"].toLowerCase().includes(term.toLowerCase())
});

// 渲染表格，绑定搜索后的响应式结果
Inputs.table(view(searchInput))

关键说明 #

• 用await解析Promise：确保salaries是实际的数组数据，而非异步待处理的Promise。
• 自定义搜索逻辑：通过search配置项精准限定搜索字段，避免无关字段干扰。
• 响应式绑定：view(searchInput)会自动追踪搜索输入的变化，让表格实时展示过滤后的结果。

内容的提问来源于stack exchange，提问作者jshwlkr