Hashtag auto-complete provided list of suggestions

[ravsom]

Hi! Thanks for the wonderful library - is it possible to show auto-complete suggestions just below the HashTagEditableText

I tried adding Overlay but there seems to be some issue with Opacity - was wondering if the feature is in-built

Thanks

[santa112358]

@ravsom
Is the auto-complete feature like this? https://pub.dev/packages/autocomplete_textfield

[ravsom]

Yes @santa112358, more so like Twitter hashtags autofill, so there can be multiple in a given text.

Thanks for your reponse.

[ravsom]

I've not been able to integrate both together, would you have any advice @santa112358, please?

The challenge is both a form field types, not sure how they fit together

[santa112358]

related issue: #30

[santa112358]

@ravsom
It is clear that you cannot implement this feature with current version's hashtagable.
To implement this, hashtagable needs to have a function called when hashtag is being typed.
Maybe the callback should be called in getComposedTextSpan which controls the textStyle of typing text.
https://github.com/santa112358/hashtagable/blob/master/lib/composer/composer.dart#L8-L71

In the callback, you set the function to show overlay. (Or you can set widget just below the textField and control the visibility of the widget in the callback)

Anyway, I know at least three people are requesting this feature on github, so I am thinking about updating package for this request.

[Abacaxi-Nelson]

yes overlay or portal.
having some trigger like : open, close, selected
and maybe generate some markup, like [#awesome:133443] (passing some ids)

[santa112358]

@ravsom @Abacaxi-Nelson @SchnMar
hashtagable v1.0.6 is published ! 🎉
I haven't written its usage, but now you can use the callback to show auto-complete.
example: https://github.com/santa112358/hashtagable/blob/master/example/lib/main.dart#L41-L44

Feel free to ask If you have any questions about this update.

Thank you.

[ravsom]

Thanks a lot @santa112358 Appreciate it.

[SchnMar]

Looking good! Thank you so much @santa112358. Do you have a buy me a coffee link? I would love to do so!

[santa112358]

@SchnMar Thank you so much ! the link is here: https://www.buymeacoffee.com/santatakahashi
It is a great encouragement ☕️

[SchnMar]

@SchnMar Thank you so much ! the link is here: https://www.buymeacoffee.com/santatakahashi
It is a great encouragement ☕️

Enjoy the coffee :)

[ravsom]

Quick question - the onDetectionTyped gets called continuously when the detectable text is typed. Is there any way to get called only once?

[santa112358]

@ravsom

Is there any way to get called only once?

It depends when you want to call, and its purpose. Could you explain with more detail ?

[ravsom]

I'd like to make a query to fetch a list of hashtags when # is typed, but as it keeps calling the ValueChanged callback every few seconds, the query is invoked too many times

Also, a callback when the detectabletext has ended so that that suggestions sheet can then be closed?

[santa112358]

@ravsom
You mean, if the user types #flutter, the query should run only when #flutter is fully typed?

Also, a callback when the detectabletext has ended so that that suggestions sheet can then be closed?

I agree it is necessary to close the suggestion list.

[santa112358]

Also, a callback when the detectabletext has ended so that that suggestions sheet can then be closed?

Opened #60

[ravsom]

@ravsom
You mean, if the user types #flutter, the query should run only when #flutter is fully typed?

Apologies, I may have not expressed myself properly.

I mean to say it should call back once #f is typed then once if #fl is typed and so on

Currently, the callback is being triggered multiple times for #f and #fl and so on

[santa112358]

@ravsom
Ok. I got it. I know it is called multiple times for same text because it is called when the cursor gets moved.
I recommend you to set variable like previousDetectedText. Then you can use the condition like this.

onDetectionTyped(text){
    if (previousDetectedText != text){
       /// sample
       fetchSuggestions(text);
       ///
      
      previousDetectedText == text;
    }
}