效果 GIF，点击展开
DataviewJS 代码
const pages = dv.pages(`"文件目录"`), yamlKey = 'source'
, dc = str=> document.createElement(str), inpu = dc('input'), sele = dc('datalist')
let arr = Array.from(new Set(pages.map(p=> p[yamlKey]).filter(p=> p))); arr.unshift('..')
inpu.style.width = '120px' /*输入框宽度*/; inpu.setAttribute('list', 'demo'); sele.id = 'demo'
inpu.onchange = ()=> arr.includes(inpu.value) && xl()
arr.map(p=> { const el = dc('option'); el.value = p; sele.appendChild(el) })
; [inpu, sele].map(el=> dv.container.appendChild(el))
const table = dv.el('div'), xl = ()=> { table.empty(); inpu.placeholder = '来源: ..'; let files = pages
if (arr.slice(1).includes(inpu.value)) { inpu.placeholder = `来源: ${inpu.value}`; files = files.filter(p=> p[yamlKey] == inpu.value) }
dv.api.table(['文档', '来源'], files.map(p=> [p.file.link, p[yamlKey]]), table, dv.component); inpu.value = ''
}; xl()
- 示例 YAML 键为
source。 - 可自行调整
dv.api.table()前两项，类似dv.table()。
相关：【已解决】我想创建一个过滤属性表，点击按钮便可以筛选出不同来源的文章
最初搜索到的方案是用 Select2 实现带查找的下拉菜单，英文论坛也找到了用 JS 凑 HTML 用上 jQuery 和 DataTables 的 先例，想不到还是搞不定，最后使用了现在的方案。
感觉自己总在整些旁门左道…
新的下拉查找框已陆续更新到旧帖：