Input an array of data in one input field

user_13086644 0
Viewed 134

Not sure how to explain this but I was wondering if there is a simple way to input an array of data for a single input field.

For example, input field 'vacancies' "vacancies": [ 15,18,16 ]

Similarly to this: enter image description here

I've seen React-select and select2 does this but is there another way to it?

reactjs html javascript
1 Answers

One of the ways to implement something like this is to use datalist and list attribute, not sure if style can customize UI of these tow inputs,

if you want to have control over how it looks exactly like the snapshot you provided, then you have to implement custom component and use HTML, CSS, JS

here is a working snippet of native HTML implementation, also not the compatibility with browsers:

Update: this doesn't work on all browsers, multiple attribute doesn't work for some browsers also may behave differently, I should have included this before the edit but didn't state this firmly, so here quote from MDN doc linked above:

If and only if the multiple attribute is specified, the value can be a list of properly-formed comma-separated e-mail addresses. Any trailing and leading whitespace is removed from each address in the list. If the required attribute is present, at least one email address is required.

Some browsers support the appearance of the list of options from the associated for subsequent email addresses when multiple is present. Others do not.

<!-- Use , to add select another value.  -->
<input type="email" list="emails" multiple>
<datalist id="emails">
 <option value="first@example.com">
 <option value="second@example.com">
 <option value="third@example.com">
 <option value="last@example.com">
</datalist>

user_8963580
Related