You should refrain from coding html in this way. it’s not accessible. Use css instead. As a bonus, your html will be simpler and thus your macro will be simpler.
As for the filter I don’t see any problem neither, although I’m not sure what you want to do with search:*:literal{$(searchTiddler)$}. If I understand it correctly, you have a “searchTiddler” variable whose value is a tiddler name the full text of which you want to be matched by some of the fields previously selected. Am I right? I’m not so sure it was your intent.
The literal output could be a long list, so I tried to implement an additional filter.
If I add tag[2022]] for testing purposes to the code, the output list will be limeted:
Your code contains an $edit-text widget for you to input some tag selection text, which is stored in the tag_selectionfield of the current tiddler. Then, later on, within the $list filter, you refer to the <tag_selection>variable. But I don’t see any code that is actually fetching the stored tag_selectionfield to set the value of the variable.
Try this… just before the <ul ...>, add a line that says:
<$let tag_selection={{!!tag_selection}}>
Note that you still need to use :filter[enlist{!!tags}prefix<tag_selection>] to find the matching tag prefix. If you use :filter[get[tags]prefix<tag_selection>], you are comparing the entire contents of each tiddler’s tags field, which is stored as a single text string containing a space-separated list of individual tags. The enlist{!!tags} operator automatically chops this up into individual tags that are then each in turn compared using prefix<tag_selection>.
BUG: this last code only select one of all the tiddlers having all the wanted tags. The map filter prefix is at fault. I don’t remember what to use for a multi-valued yielding instead of a mono-value map, but I’m pretty sure I’ve already use such a scheme.