Search box in tag dropdown - A question

,
#1

While looking for a solution to this topic I discovered some interesting information, and in the last few days I tried to build what I had hypothesized, but I’ve been stuck for a while and the question has become something that interests me too.

The original question was: Tag pill dropdowns as list-searches?

Looking for a solution I found that by modifying the tiddler $:/core/macros/list, in particular editing list-tagged-draggable you can replace $subFilter$ with something like search:title,caption:[X] (where X = the search parameter)
-Btw I will make a new macro like “my-list-tagged-draggable” to not overwrite the core macro

Details

Editing list-tagged-draggable:

\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:[X]]" 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:[X] as subfilter

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

This means that the dropdown no longer contains the list of all tagged tiddlers but only those tagged tiddlers that result from the search search:title,caption:[X].

  • But I don’t understand how to put a variable in the place of “X”. Any tips?

So I can choose every time what to search from the tag-pill dropdown. (I will then edit $:/core/ui/TagTemplate to have a collapsable search box inside)

Two other things I have doubts about, but not as important:

1) Can I use the “search” operator better? (It already works as it is now, but if anyone has any advice, it is welcome)

2) I removed $subFilter$ from the macro. 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”)

A linkcatcher widget question. The widget makes an $action-navigate with $scroll="no" scroll anyway
Tag pill dropdowns as list-searches?
#2

IMO there is no need to change or create a new macro. Use subFilter:"search:title,caption:{X}" and it should do what you want.

Try this:

<$edit tiddler=X tag=input/>

<<list-tagged-draggable "HelloThere" subFilter:"search:title,caption:{X}">>

The subFilter variable is substituted into the filter string. So it will be executed like this

filter="[<__tag__>tagging[]$subFilter$]"

becomes

filter="[<__tag__>tagging[]search:title,caption:{X}]"

Hope that helps
-mario

3 Likes
#3

Oh, now it seems almost obvious that this is the best thing to do. :sweat_smile: But it wasn’t, thank you very much!

However, I still have the problem of how to change “x” based on what I want to search for from within any tag dropdown. (I think I can make the serach box easly but I don’t know how to point to that subfilter variable)
How can I do that?

#4

{X} references the text content of the tiddler named: X … Try this:

<$edit tiddler=X tag=input/>

<<list-tagged-draggable "HelloThere" subFilter:"search:title,caption:{X}">>
#5

I don’t know if we understood each other correctly or maybe I asked the question wrong, but what I would like to do is to add the ability to search from within any tag-pill dropdown, without having to write a macro.

At this point perhaps things could change and defining a new macro could be useful. I would like to put something in place of subFilter or in place of the “X” of subFilter:"search:title,caption:{X}" that can be changed every time from the dropdown

Wait maybe I didn’t understand your answer. I’ll come back in a minute

#6

If you want to have a search input box in every tag-pill dropdown, you’ll need to modify the tag-pill dropdown.

IMO there is no other way to insert a search box into the core UI tag-template

#7

Yes that’s what I’ll do, I meant I didn’t want to write a macro <<manually>> (but I think I misunderstood your answer, I think I understood how to resolve the issue)

#8

I understood how to do it. Thank you!
I got a little confused because I didn’t realize that you had changed the brackets from square to curly brackets, therefore going from a hard parameter to a soft one

#9

$ _what-to-search.json (92 Bytes)
$ _core_ui_TagTemplate(6).json (1.3 KB)
$ _sw_ui_ListItemTemplate_Tag+search.json (553 Bytes)

^ Here there are the tiddlers that make it possible to search from inside the tag-pill

I only have a small css problem to solve (keeping the edit text wide enough and to keep next to it the button that deletes the contents of the $edit widget), everything else is fine.

• Preview:

2023-12-21 121725

Note that the search-box should be as long as the entire dropdown (except for the “x” button, until I find a solution imagine it as in the yellow figure :joy:)

#10

Yea, I did also run into some “speed bumps”.

Here’s a working version, but it’s a bit hacky since it contains inline styles and I’m not happy with the code yet.

Function

  • It overwrites the $:/core/ui/TagTemplate
  • The “x” after the search input will not close the dropdown
  • Every other “link” click will close the dropdown
  • Every other “link” click will also clear the search input
  • There is a config tiddler, which allows enabling / disabling the search input: $:/config/ShowTagDropdownFilterInput
    • If tiddler is missing or set to “no” the input is hidden
    • If text is set to “yes” the search input is shown

$ _core_ui_TagTemplate-tag-dropdown-search-input-OK.json (2.6 KB)

Have fun!
-mario

#11

Also, if the list elements are selected with the TAB-key and activated with SPACE, the dropdown does not close – IMO that’s a bug, which I will not have time to fix atm.

#12

My attempt:

$__sw_ui_ListItemTemplate_Tag+search.json (740 Bytes)

#13

Thanks, it works great! (And much better, the observations you made were correct)