Autocomplete when InputText contains "@" like Twitter

Autocomplete when InputText contains "@" like Twitter

  

Good Morning,


I am going to ask a question that I do not know if you can solve me, since it is possible that it can not be implemented.


I explain what I want to do. Basically I want to have an InputText in which a user can write whatever they want, but at the moment write an "@" the system offers suggestions, as if it were Twitter. I enclose a couple of images so you can see more or less what I want to do.


Right now, InputText offers me the option to autocomplete if I start writing with an "@" since the condition of the IF is like this. However, if from the beginning I write something else, and in the middle of the sentence I put an "@" it does not offer me the autocomplete. I wanted to do a "contains" in the IF condition but it can not be done, I have some way of doing it through JavasCript or with something internal from OutSystems?



Thank you very much,

Greetings.

If you type something like "OutSystemsIsAwesome@", the first IF will return false because "OutSystemsIsAwesome@" <> "@". That's why you don't get anything. 


And yes, you can do it on the if condition. Search for the "Index" built-in function so you can "validate" the existence of the "@" in a given string.

Armando Gomes wrote:

If you type something like "OutSystemsIsAwesome@", the first IF will return false because "OutSystemsIsAwesome@" <> "@". That's why you don't get anything. 


And yes, you can do it on the if condition. Search for the "Index" built-in function so you can "validate" the existence of the "@" in a given string.

Hi Armando,

I know, I know that the IF condition is incorrect but I had put it so that you had a reference.

I am using the "Index" that you have commented to me, I attached you image. However, I do not know if I am using it well because it only completes me when I write from the beginning "@".

For example, I want to write "Good morning, @ ....." there it is, when I write the "@" I want the options to be displayed. You can help?


Thank you very much,
Greetings.


I know that this component is mobile, but perhaps it's worth to check the code behind it.

Cheers

Henrique Batista wrote:

I know that this component is mobile, but perhaps it's worth to check the code behind it.

Cheers

Hi Henrique,

Thanks, I'm going to check this component :).

Greetings.


Thanks for the explanation. I don't think the default autocomplete widget will work for what you want to achieve since it replaces everything in the input with the result you've picked.

You can always look at the autocomplete solutions present on the forge, maybe one will do what you want. 

I'll try to take a look at this later!


Henrique Batista wrote:

I know that this component is mobile, but perhaps it's worth to check the code behind it.

Cheers

Hi Henrique,

That is exactly what I want, but I am unable to see the action that is performed when the InputText changes, I do not see anything related and I have downloaded the OS_TextEditor to see the example, due to the dependencies. But the truth is that I do not know how it is being done.

Greetings.


Armando Gomes wrote:

Thanks for the explanation. I don't think the default autocomplete widget will work for what you want to achieve since it replaces everything in the input with the result you've picked.

You can always look at the autocomplete solutions present on the forge, maybe one will do what you want. 

I'll try to take a look at this later!


Hi Armando,

I have managed to do the following on the Web (attached image). The question now is that yes, I write for example "Good morning @" and in the moment I find an "@" the autocomplete action is done, I even take the position of that "@" and I look at what is next to filter the results

But when click on the option, the text change and only show this name, deleting all the text there are before:

But now I have a problem, when you open the drop-down to choose one of them, I select one and immediately the text box is replaced by the selected option and I really want to keep what I had written before the "@" and also include this selection. That is to say, that in the end it is "Good morning @jordi", for example.

Thank you very much,
Greetings.