This page is part of a static HTML representation of the TiddlyWiki at https://tiddlywiki.com/

Customising search results

7th December 2020 at 6:11pm

By default, the results for the sidebar search box are displayed as a simple list of tiddler titles. The search results can be customised by adding plugin visualisations that show the search results in different ways. (Tabs are shown automatically if an additional search result visualisation is detected).

Search result visualisations are stored in tiddlers tagged $:/tags/SearchResults. The default search result listing is implemented in the system tiddler $:/core/ui/DefaultSearchResultList.

To create a new search result visualisation:

  1. Create a new tiddler tagged $:/tags/SearchResults
  2. Use the widget variable searchTiddler to access the title of the tiddler containing the current search term

If you'd like the new visualisation to be the default, create a tiddler called $:/config/SearchResults/Default containing the title of the tiddler containing the search visualisation that you want to display by default.

Here is an example of an alternative visualisation that displays results in reverse chronological order:

\define searchResults()
<$set name="resultCount" value="""<$count filter="[!is[system]search{$(searchTiddler)$}]"/>""">

{{$:/language/Search/Matches}}

</$set>
<<timeline subfilter:"!is[system]search{$(searchTiddler)$}">>
\end
<<searchResults>>

Introduced in v5.1.23 The sidebar search introduces a more sophisticated search-mechanism which makes it possible to navigate the search results using the keyboard shortcuts Down and Up. To add that mechanism to your own custom search results follow these simple steps:

  1. Your tiddler tagged $:/tags/SearchResultsis accessible through the configTiddler variable
  2. The user-input in the search field is accessible through the userInput variable
  3. Use the fields first-search-filter and second-search-filter to store the filters used for your search results. See the tiddler $:/core/ui/DefaultSearchResultList for details
  4. Use the following form so that navigated search-results are highlighted, modify it to match your needs:
<$list filter="[<userInput>minlength[1]]" variable="ignore">
<$list filter={{{ [<configTiddler>get[first-search-filter]] }}}>
<span class={{{[<currentTiddler>addsuffix[-primaryList]] -[<searchListState>get[text]] +[then[]else[tc-list-item-selected]] }}}>
<$transclude tiddler="$:/core/ui/ListItemTemplate"/>
</span>
</$list>
</$list>

Tip
Note that the searchTiddler variable still contains the name of the tiddler that is used for sorting the search results. The editTiddler variable contains the name of the tiddler that is being edited.