DataviewJS 下拉筛选菜单搜索功能

经验分享
1

image image

效果 GIF，点击展开

20240417_144811

DataviewJS 代码 
const dFiles = dv.pages(`"文件目录"`), yamlKey = 'source'
, dc = (str, obj)=> Object.assign(document.createElement(str), obj||{})
const inpu = dc('input', {
  style: 'width: 120px;', /*输入框宽度*/
  onchange: ()=> arr.includes(inpu.value) && xl(),
})
inpu.setAttribute('list', 'demo')
const sele = dc('datalist', {id: 'demo'})
const arr = Array.from(new Set(dFiles.map(p=> p[yamlKey]).filter(p=> p)))
arr.unshift('..'); arr.map(p=> sele.append(dc('option', {value: p})))
dv.container.append(inpu, sele)
const table = dv.el('div')
, xl = ()=> {
  table.empty(); inpu.placeholder = '来源: ..'; let tdata
  if (arr.slice(1).includes(inpu.value)) {
    inpu.placeholder = `来源: ${inpu.value}`
    tdata = dFiles.filter(p=> p[yamlKey] == inpu.value)
  } else tdata = dFiles
  dv.api.table(['文档', '来源'], tdata.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 的 先例，想不到还是搞不定，最后使用了现在的方案。

感觉自己总在整些旁门左道…

新的下拉查找框已陆续更新到旧帖：

3 个赞
2

太棒了，感谢分享。

3

旁门左道什么的，自己也有同感，看了很多帖子，下载了不少别人分享的示例库，虽然知道记笔记才是最重要的，但就是忍不住折腾

4

不不不，其实这里的意思是，个人正经的技术路径老也搞不定，总是只能弄一些旁门左道。

具体到这个话题，就是一直报错 $(...).select2 is not a function，直到更改方案。甚至不知道是不是连 Select2 导入都没搞定。

所以也许有人知道 DataviewJS 怎么在线引入吗…

5

哈哈哈，和我相似，大道需要花费更多时间和精力，小道能立竿见影有成就感，但旁门左道要做到极致也不容易。

6

之前照着这个帖子的代码自己改了改，可以实现下拉菜单

但是自己的代码太复杂，而且本来想实现多重筛选的，但是那样的话代码就太太太太复杂了得各种if，我想了想感觉自己是理不清里面的逻辑的，就没管
不知道有没有插件能直接对已经生成的dv表格直接加上筛选功能，就跟sortable插件一样直接给表格添加上功能

7

大佬你好！想请教一下，你上面代码中 dv.api.table， 这个我找了dataview的官方文档，没看到有相关接口和用法呀，请问是有什么补充文档或者隐藏接口之类的吗，望回复，感激！

8

@louis_max 我是看别人代码学的 :smile: 最早是在这里：Dataviewjs的奇技淫巧 - #384，来自 lazyloong

9

好的，感谢，我研究一下先