Tag pill dropdowns as list-searches?

#1

Hi everyone

I tend to have a lot of tiddlers tagged with any given tag. So it is kind of annoying when I click on a tag to have to scroll down to get to a tiddler in the list that appears, or simply to see if I have already have a particular tiddler with that tag.

Would there be a way to adjust the tag dropdown menu so you could click on a tag and start typing to filter the results?

I have always tended to get around this by creating tiddlers for the tags, then adding a view template with a list-search macro. Now I am wondering if it would just be easier to have a more practical type of tag pill dropdown list.

While on the topic of tag button dropdowns, I find it strange that when you click on a tag, you can’t start hitting the down arrow button to scroll down. You have to leave the keyboard and move to the mousepad. The edit-comptext plugin allows you to use the down arrow keys to navigate toward an option from the dropdown list, but the tag button list does not let you do that. Maybe something worth looking into?

4 Likes
Search box in tag dropdown - A question
#2

You may create a GitHub issue for that. We do have keyboard handlers implemented for several elements. … But for the tag-pill nobody did it yet. … I’m not sure how much extra code will be needed.

The tag template which is used for the dropdown is relatively simple. So I think you should be able to implement the filter input yourself.

#3

Thanks @pmario ! Will give it a “college try”.

#4

@DaveGifford I have thought of building something similar myself and other features in the tag pill drop down. This includes;

  • A search to search within only tiddlers with the given tag
  • Be able to apply a filter to the tiddlers listed in the tag pill dropdown eg items tagged todo but not done
  • The ability to create a tiddler not only with the current tag, but using a nominated tiddler template.
  • In time I also plan to allow special “action commands” to appear on the tag pill such as on a tiddler with the todo tag a done button (that stamps a done date, adds a done tag etc…)

You may have seen before my “reimagin tags” package which adds a range of items to the tag pill drop down using the $:/tags/TagDropdown tag. This may give you some inspiration and insight.
reimagin-tags.json (16.6 KB)

Notes on the solution you/we are seeking;

  • In the editor toolbar the link icon to insert tiddler name with a search is a possible thing to clone and repurpose. I will have a quick look. $:/core/ui/EditorToolbar/link-dropdown

  • I think the main trick may be in getting the tag pill dropdown to perform correctly while you are interacting with search box within it.

This is all part of my approach to building powerful tools into tiddlywiki that are just there, in the right place and intuitive to use so we don’t need to teach people how to use it just give it to them. Like my reimagin tags.

  • I am currently working on “predefined action packages”
  • The next frontier is automatic access to and filtering of lists without needing to code them.

Tell me if and how you would like to continue this discussion here.

#5

Yes I remember seeing that reimagine tags package and commenting on it. It is a nice step forward.

I started this thread because I had my mind on it and wanted to get people’s thoughts. But I am focused on other things at the moment, so I may not play much with solutions for it right away.

1 Like
#6

I will try and keep track of this thread and post here If I come up with something.

1 Like
#7

Update I am seeking help for a more generic solution which could address this specific one Is there a Search within tool anyone has created?

#8

I found something interesting, looking at $:/core/macros/list.
I’m still not sure how to apply what I’ve discovered, but I’m on the right track.

Editing list-tagged-draggable: (If I can find a solution I will make a new macro like “my-list-tagged-draggable” to not overwrite the core macro)

\define list-tagged-draggable(tag,subFilter,emptyMessage,itemTemplate,elementTag:"div",storyview:"")
\whitespace trim
<span class="tc-tagged-draggable-list">
<$set name="tag" value=<<__tag__>>>
<$list filter="[<__tag__>tagging[]search:title,caption:[pick]]" emptyMessage=<<__emptyMessage__>> storyview=<<__storyview__>>>
<$genesis $type=<<__elementTag__>> class="tc-menu-list-item">
<$droppable actions="""<$macrocall $name="list-tagged-draggable-drop-actions" tag=<<__tag__>>/>""" enable=<<tv-enable-drag-and-drop>>>
<$genesis $type=<<__elementTag__>> class="tc-droppable-placeholder"/>
<$genesis $type=<<__elementTag__>>>
<$transclude tiddler="""$itemTemplate$""">
<$link to={{!!title}}>
<$view field="title"/>
</$link>
</$transclude>
</$genesis>
</$droppable>
</$genesis>
</$list>
<$tiddler tiddler="">
<$droppable actions="""<$macrocall $name="list-tagged-draggable-drop-actions" tag=<<__tag__>>/>""" enable=<<tv-enable-drag-and-drop>>>
<$genesis $type=<<__elementTag__>> class="tc-droppable-placeholder"/>
<$genesis $type=<<__elementTag__>> style="height:0.5em;">
</$genesis>
</$droppable>
</$tiddler>
</$set>
</span>
\end

Here in the place of $subFilter$ I put search:title,caption:[pick] as subfilter

<$list filter="[<__tag__>tagging[]search:title,caption:[pick]]" emptyMessage=<<__emptyMessage__>> storyview=<<__storyview__>>>

“pick” is just an example that works with the $:/tags/Macro tag.
Now in the dropdown only the tiddlers that contains “pick” in their title or caption appear.

  • Now what I must understand is:

  1. I removed $subFilter$ from there. Could it be a problem?
    (keep in mind that I would make this change in a “my-list-tagged-draggable”, not in the core marco. (I will only edit $:/core/ui/TagTemplate to have “my-list-tagged-draggable” in the place of “list-tagged-draggable”)

  2. How to put a variable in the place of “pick”. So I can choose every time the search imput from the tag-pill dropdown.
    (Then it will only be a matter of editing $:/core/ui/TagTemplate to have a collapsable search box inside, I already think I can do that easly) But I’m not familiar with variables so I’m stuck at the moment.

  3. Can I use the “search” operator better?
    (I never used it before and I did the most basic thing, probably it could be improved)

I hope these considerations can be useful

1 Like
Search box in tag dropdown - A question
#9

I don’t know if it exactly answers the question originally asked, but in this topic (and thanks to @pmario for his kind help) there are some tiddlers that might be right for you.