Would like to make the table input data into the search and bring back results…
So a user would click on ‘Blues’ in the table and search would return those songs
I’m an experimenter - and I try a gazillion ways - until something works…
I made a tags page and tags markdown files - but don’t know how to use them
tried plain text: {{item.url}} {{item.tags=“blues”}}
I think this would work if code is ok or some variation of this idea?
Thanx
-Michael
Your search box and the {{item.tags}} {{item.title}} loop underneath it are Elements CMS’s Collection Search component, which is Alpine.js‑powered under the hood. The cleanest way to wire your genre grid into it — so a click fills the search and repopulates that same results loop, right there on the page — is:
1. Give the search field a fixed ID
Select the search input → inspector → Advanced tab → set a Custom ID, e.g. genre-search. (Every built‑in Elements component has this Advanced/ID section — it’s the same place Anchor links pull their IDs from.)
2. Turn each genre cell into a real link
Select the “Blues” cell → inspector → Link panel → Choose Link… → set the link type to Plain → enter # as the value. This makes it a clickable <a> without navigating anywhere (Elements’ Link panel works on “most components and inline text areas,” so your table cells qualify).
3. Add an onclick custom attribute
Still in that Link panel, add a Custom Attribute:
onclickjs
const el = document.getElementById('genre-search'); el.value='Blues'; el.dispatchEvent(new Event('input',{bubbles:true})); return false;
Tried this - doesn’t work
Terms wrong? #? wrong?
Well - got it working!!! Here is the code for anyone else:
…
document.getElementById(‘genre-search’).querySelector(‘input’).value=‘Blues’; document.getElementById(‘genre-search’).querySelector(‘input’).dispatchEvent(new Event(‘input’,{bubbles:true}))
…
Very cool - click on ‘Blues’ shows all the blues songs now
