edit text widget + autocomplete: could anyone guide me on a high level what concepts I'd need to learn in order to build this?

[Melvin]

I don't think this feature exists yet, and I'm still relatively new to TiddlyWiki. Well, it does exist for the sidebar search bar that looks at all tiddlers (e.g. http://2585.tiddlyspot.com/), that's almost exactly what I want, but then in a tiddler.

I want to create a TiddlyWiki tag (or sets of tags) that does the following:

1. There is a search bar

2. It has autocomplete/a typeahead

3. It looks in a JSON tiddler for options on autocomplete

4. Once you click on a suggestion, it is added to somewhere. This could be: a tiddler with data, the tiddler where the search bar is in (either directly or via a field) or anything else.

What I know:

A. There is an edit text widget, so step 1 is done (https://tiddlywiki.com/static/EditTextWidget.html).

B. I don't know how you can add an autocomplete function to such a widget. So I have no clue about step 2.

C. I also don't know how to select an autocomplete source. So I have no clue about step 3.

D. Since the autocomplete does not exist, I don't know how to create a suggestion list that once clicked on, it'll be added. However, I do know that similar solutions have been implemented for the select widget (https://tiddlywiki.com/static/SelectWidget.html).

Does anyone have any idea on what concepts I should learn and what approach I should take?

Should I take a JS approach and create a macro? And if so, should I create a new tag, or extend the edit text widget? 

Or should I define a function within a Tiddler comprised of combination of TiddlyWiki tags?

What do you think would be a feasible design to implement this, and what concepts are needed?

Goal: I want to create a JSON file with all kinds of brand specific food that I eat, and then I want to store that in my daily journal. Since I want to do data analysis on it later, I don't want to make typo's.

[Melvin]

Hmm... it seems I was wrong. It probably *is* possible.

There are some examples written in the source code, so I'll just try to figure out how those things work and edit that.

An example is here on how to implement typeahead/autocomplete functionality.

https://github.com/Jermolene/TiddlyWiki5/pull/2585/commits/47920d28ee0a47e3e64b1a277efb6cc42eae78a3

[TonyM]

Melvin

A profitable path to follow with tiddlywiki is to clone and edit tiddlers that come with tiddlywiki. Just be thorough and you can clone the advanced search and start build your own custom search.

Regards
Tony

[Mat]

Melvin, might you be describing the SelectWidget? It's not a "search bar" but might be interpreted as such. It can use a LinkCatcherWidget to "catch" the selection and do some action.

Not sure about the JSON part tho. Direct JSON manipulation is still very limited in TW.

<:-)

[Melvin]

I solved it. I created a food widget. It uses a simple text file in which I store permissible food names to type, and then I'm able to add them in the widget. The idea is to integrate this in my daily questionnaire.

Since I don't have a tiddly spot yet, nor do I intend to get one in the foreseeable future, I'll export the 2 relevant tiddlers here. The food names are in Dutch :D I tend to mix Dutch with English (mostly English though)

caption: {{$:/language/Search/System/Caption}}
created: 20190913135403441
food-kaas: 100
food-pindakaas: 25
modified: 20190913144243601
myfield: pindakaas kaas
revision: 4-baf8eae19b4c947a64cf11be781b4802
tags: experiment
title: Food Widget
type: text/vnd.tiddlywiki


\define add-link-actions()
<$action-listops $field="myfield" $subfilter="[title[Food Widget/linkcatcher]get[text]]"/>
\end


\define food-item() food-$(an-item)$


The trick is that I'm manipulating a field.


For more info on how I do it:
https://tiddlywiki.com/static/ActionListopsWidget.html


<div class="tc-search">
<$edit-text tiddler="Food Widget/search" type="search" tag="input"/>
</div>


<$reveal state="Food Widget/search" type="nomatch" text="">
<div class="tc-search-results">
<$linkcatcher to="Food Widget/linkcatcher" actions=<<add-link-actions>>>
<$list filter="[title[Food Widget Storage]get[text]splitregexp[\n]prefix{Food Widget/search}]" template="$:/core/ui/ListItemTemplate" >
</$list>
</$linkcatcher>
</div>
</$reveal>


''You ate the following''


<$list filter="[list[!!myfield]]" variable="an-item">
<<an-item>>
Gram
<$select field=<<food-item>> tooltip='amount of gram'>
<option>10</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
<option>150</option>
<option>200</option>
</$select>
<$button>
<$action-listops $field="myfield" $subfilter="-[<an-item>]" />
<$action-deletefield $field=<<food-item>> />
Delete
</$button>
<br /> <br />
</$list>

created: 20190913135622703
modified: 20190913143840846
tags: experiment
title: Food Widget Storage
type: text/plain


kaas
pindakaas
chocolade pasta
hagelslag
brood
boter