flutter_typeahead icon indicating copy to clipboard operation
flutter_typeahead copied to clipboard

Multi-suggestions?

Open claudelk opened this issue 5 years ago • 3 comments

Hi team--

Thanks a lot for the job so far.

I am trying to implement in my app something similar to tagging people on Facebook/Twitter, etc. Flutter_typeAhead works great for one (I am using the classic '@' to kick off the backend service), but it stops there. Is there a way to:

  1. keep the cursor active once a suggestion has been chosen
  2. allow for another search (with space/colon/semi-colon separator to distinguish the pattern to search for eventually)
  3. not necessarily pertinent to typeAhead, but is there a way to format the same TextField differently? The goal will be to distinguish the suggestions to other texts the users might input (again, think Twitter, you can @ to tag someone and write a text close to it).

Gracias!

claudelk avatar May 21 '19 23:05 claudelk

I was able to achieve this, but after some your library updates, suggestionsCallback do not call more than once anymore, any ideas?

romatroskin avatar Jun 05 '19 14:06 romatroskin

Only one suggestionsCallback is running at a time now. Some users had expensive DB calls, were concurrent calls were hitting the server too hard. If the user changes the text, the suggestionsCallback will be queued and called again once the current one is finished. But to address the original questions,

  1. Does setting keepSuggestionsOnSuggestionSelected to true work? This will keep the suggestions box open and may help with your multi-selection problem. You can use a suggestionsBoxController to manually close the suggestions or it will auto-close when the keyboard closes.

  2. I believe you can do this in suggestionsCallback already? Just check the beginning of the string and return the correct list of results using if statements.

  3. You might be able to this in itemBuilder. Use if statements and check the suggestion in the callback. Return a differently formatted widget according to the suggestion. If beginning contains @ return this widget, else return this other widget.

KaYBlitZ avatar Jun 05 '19 19:06 KaYBlitZ

Just for anyone else in the future that might want to create multiple selectable with the type ahead plugin.

  • keepSuggestionsOnSuggestionSelected works and will keep the dropdown open even if the user clicks on a suggestion.
  • when you returning a list in suggestionsCallback map it to have a selected variable.
  • create a list that will persist the build, for example. List<String> selectedItems
  • in the itemBuilder I created a ValueNotifier that would check if the suggestions have been selected by the user
  • the itemBuilder also returns a ValueListenableBuilder that will liten to the notfier created in the step above. The builder itself will need to return CheckboxListTile
ValueNotifier<bool> notifier = ValueNotifier<bool>(
                      selectedItems.contains(name),
                    );

                    return ValueListenableBuilder(
                      valueListenable: notifier,
                      builder:
                          (BuildContext context, dynamic value, Widget? child) {
                        return CheckboxListTile(
                          title: Text(name),
                          value: notifier.value,
                          onChanged: (value) {
                            setState(() {
                              notifier.value = value!;
                            });

if (selectedItems.contains(name)) {
                              selectedItems.remove(name);
                            } else {
                              selectedItems.add(name);
                            }                            
                          },
                          controlAffinity: ListTileControlAffinity.trailing,
                        );
                      },
                    );

maxy-hi avatar Sep 21 '22 12:09 maxy-hi