Keeping form inputs after sending about bootstrap5-tags HOT 12 CLOSED

@staminem since this is a select[multiple] replacement, you would have to do some work on actually making a loop over the array and create the relevant options but that should be feasible. i don't think there is anything i can do here since it's more related to how you generate your inputs

from bootstrap5-tags.

optionally, as a convenience, it wouldn't be too hard to store the value somewhere in a data attribute and create the relevant tags on init

from bootstrap5-tags.

yes i understand, thank you! i will probably try something using localstorage or similar

from bootstrap5-tags.

Related question: when using server to fetch values, we get both value & label columns. The selected tags are available only as values.
Use case: when user comes back to the form to edit, need to restore the existing values, but also labels.
https://vue-multiselect.js.org/ does this by returning an array with objects [{value: 123, label: 'abc'},...] , not just ['123']. This helps a lot as we don't have to lookup items again on server to fetch the labels.
I realize <select multiple works only with an array of values.

Would it be possible to have 2 methods, get/set options, which return and accept an array of objects?

from bootstrap5-tags.

I think nothing prevents you from adding the option before initializing the tags input ? or am i missing something? if you want to create a get/set options as a PR you are welcome to do so :)

from bootstrap5-tags.

Are you using this in a project which lets the user choose tags (with value/label), and later have the possibility to edit the tags list? With values/labels loaded from server, how do/would you recommend to handle showing the user the previous list?
eg from data.json, if the user selects 'fr', the app receives only 'fr' with the regular bootstrap select.

I'd like for the app to receive [{"value": "fr", "label": "Server language French"}], so it can save both and then restore/show them both when user edits the tags later. Especially if 'fr' comes from a server list queried by user, with various terms.

from bootstrap5-tags.

well, since you provided the list in the first place, you know what value matches which label.
if you have a db with id => title, your server call return the list. when submitted, you only get the id, but since you have the db at hand, there is no need to have the name.
when reloading the page, simply populate the select with the proper options. you can also see how i add options in the demo.
sorry maybe i'm missing something but i don't see the issue :)

from bootstrap5-tags.

but since you have the db at hand, there is no need to have the name.

Name also needs to be saved, in order to avoid implementing another API which accepts a list of ids and returns a list of names.

In the demo, I don't see how to dynamically add options. I only see options pre-populated with HTML:

<option value="1" selected="selected">Apple</option>

How to make the server demo example pre-loaded with both 'fr' and 'en' (and labels) ? With JS, not HTML, and without making a server call.

Appreciate your time on this :)

from bootstrap5-tags.

This is how I add an option

I don't know how you load the initial data, but it has to be another api endpoint anyway no? The endpoint providing suggestions does just that, nothing else. To load initial data, you do something else, and you can add options in js as required.

from bootstrap5-tags.

but it has to be another api endpoint anyway

There's an API, /tags, which handles a ?query parameter. As the app developer, I wouldn't want to implement handling a ?ids=xya,cmjsd,asdf%20 parameter which does a db query with IN.

This is how I add an option

I see, thanks.
For comparison, using https://vue-multiselect.js.org/ (with v-model="tags", but it could also have an API to get/set tags with value/label), returns an array with

[
 {
    "value": "fr",
    "label": "Server language French",
},
 {
    "value": "en",
    "label": "Server language English",
  }
]

I then save this entire array is in product.tags db field. When editing a product later, tags are simply loaded & populated in the list.

No need for

1. extra code on server API for handling a list of IDs
2. extra API call (and delay in showing the data to user)
3. extra code in the app to add options when editing existing values.

Hope the use case is more clear? Just trying to lower the effort required by app developers in using this widget in their data apps, which involve a server and editing existing data, not just adding.

from bootstrap5-tags.

i see. that's obviously something i never do because, while it's easier, it has its issues (what if a tag is edited in the meantime? what about multilingual).. but that's another topic.
the thing is : what do you expect when sending the form ? i guess in your case, you don't send the form (in a regular html form submit, it should be an array).
So you probably need to retrieve the values yourself (that's a loop with option[selected]) and you can get the pairs of values that you need and save it the way you want. it's basically this with a map instead of a plain value

Then, in order to restore it, simply loop on the values and add options as needed.
Obviously, that's not as easy as binding a vue model, but it's probably very easy to create a vue something that does the process i described under the hood in a couple of lines

from bootstrap5-tags.

Merci, Thomas! I'll look into this.

Wishing you a good weekend :)

from bootstrap5-tags.