Adding a tag dynamic search ina text input based on existing db stored tags?

Wappler General
#1

Hi all

So I have created a tag creator with a text input field which creates and array of tags entered by the user which can then be saved into the database.

The process i used follows this Wappler example: https://docs.wappler.io/t/working-with-arrays/7701#Adding-Tags-List

and then by following a process to save the array of tags here: Multi-Select Inputs - How to Write an Array to the Database

OK so I want to be able to do is this:

Once a user has created a tag and saves it to the database for the users account, when the user comes back or another user in the same account comes back, and begins to enter the same tag it shows in a dynamic partial search any tag which matches the partial entered text, which they are able to select like the image shown below:

multiselect

The purpose of this is to ensure that the user is aware the tag already exists and we don’t duplicate tags in the database, or there is a similar tag they can choose form rather than creating a new one.

Is this a big ask with current Wappler? or is there a way to achieve this?

Thanks!

#2

To stop duplicating tags you can use the validation rule of exists in database and throw a error if the user enters a value already in the database

As for searching the database here’s the docs on how to do this

You’d just create your own drop down however you wanted as long as its checking the text input its fine to create however you please

After that you could create a dynamic event when you click the value in the dropdown which would set the input of the text input to what ever the value is of what the database returns

On a side note you mention them choosing the tag if this is in the same text input as the creation you may need a condition to check If it exists in the database if not create one and do whatever or if it exists just do whatever

#3

Cheers! I’ll give this a try and see what I can come up with.

#4

With the new “no results” option in Wappler, I think you can acheive what you want via autocomplete component.
I have not used it myself, but a quick search in community should put you on the right track.

#5

Thanks Sid, I tried autocomplete but can’t seem to get the tag functionality and the autocomplete to work together. You can autocomplete on search but hitting enter doesn’t save the tag to the array.

#6

Selecting the “no results” option should give you an event to act upon.
And you can change the text of the “no results” to something like “Add this tag” too, I think.

#7

Ok, thanks I will give that a try. Cheers!

#8

Unfortunately it doesn’t work it just gives yo the below. There is now logical reason it shouldn’t work, but appears clicking the no results action to add the text content to the array does not actually add anything to the array.

tagarray

I may ahve to try caviling together a work around as suggested by @Sorry_Duh

Thanks for you help!

#9

have you tried a on key press with a modifier on the enter key? not looked into auto complete much but this may be a option

Edit: this doesn’t seem to work as I expected it to after testing it out

#10

So I came up with a solution using two arrays and when I get a moment will throw up the solution.

Here is a short video.

tag example

1 Like