Snippet - add dropdown for DataviewJS queries

Share & showcase
1

Hi, just wanted to share a snippet for adding a dropdown that dynamically updates a dataviewjs query :slight_smile:
this one specifically shows a list of notes by tag. would appreciate any feedback
(my knowledge of JavaScript is limited, this snippet was created with help from chatgpt)

const container = dv.container;
const selectElement = dv.el('select');
let tagSet = new Set(dv.pages().file.tags); 

for (let tag of tagSet) {
    const option_tag = dv.el('option', `${tag}`);
    selectElement.appendChild(option_tag);
}

container.appendChild(selectElement);

const dynamicContentContainer = dv.el('div');
container.appendChild(dynamicContentContainer);

selectElement.addEventListener('change', function() {
    dynamicContentContainer.innerHTML = '';

    let selectedValue = this.value;
    let tag_pages = dv.pages(`${selectedValue}`);

    dynamicContentContainer.appendChild(dv.el('span', `<br><b>${selectedValue}</b><br>`));

    for (let page of tag_pages) {
    dynamicContentContainer.appendChild(dv.el('span', `${page.file.link}<br>`));
    }
});
4 Likes
2

This is great!

1 Like
3

Thanks for sharing the source.
I’m a beginner and don’t know how to use it.
I would appreciate if you could explain it with a simple example.