Editing: selectbox with autocomplete of live data as you type, with possibility to add new value#252

New editor input type: Advanced selectbox, with autocomplete suggesting existing column values as user types text,
along with a feature to allow users to easily add new selectable values.

Like in this first dropdown, “Creatable Example”, or the “Advanced Example”:
https://react-select.com/creatable

So, you could select a value from the list,
type something to have autocomplete help you select,
or type something not yet existing and then create it. Even without any buttons in this implementation.

This way users could add new values to certain columns if needed, during inputting new rows in the database.
Next time someone wanted to add that same value, it’s now created and already there among the selectbox values.

Preferably the possibility to add new values would be enabled or disabled with a setting.

Another approach would be a button next to the selectbox, to add a new value to the foreign key table which stores the values of the selectbox.
A kind of minimized table editing functionality, only capable of adding new values straight to a specific column.

Let’s see with an example how that could work for the user. I’ve actually seen this exact thing on one production site, but it’s for registered users only, so I’m not linking it here, just trying to describe its neat functionality for you.

The user is selecting something using a selectbox, let’s say a brand.
The desired brand is not found among the selectable values yet though, so the user wants to add a new brand.
In this use case this would be a typical situation, no need to restrict adding new.
We want our registered users to be able to easily accomplish what they came to do, also enabling others to subsequently do the same, with minimal moderator effort.

So, there’s a button “Add new” right next to the selectbox. Clicking that, two things happen.
The button text changes into “Select”. AND, now, people pay attention, the selectbox magically turns into a one-line edit box..!
Now the user can type in the desired value, just like in normal one-line editing.
For those who change their mind and decide they want to go back to selecting from the existing values, there’s still the button, which now does the opposite than before, hence the text “Select” on it.
(Might have also fixed text like “Add / Select”, not really sure which would be best. Or some intuitive icons. Could even be “Add” then “Save” but then the switching of input methods would have to be provided somehow differently.)
When clicking, the edit box turns back into the selectbox. If this is not what they wanted however, they can click the button once again, and what they might have typed already, is waiting for them in the edit box. And so on, the user could even go back and forth, until ready to move on to filling the rest of the edit form.

In preferences, there should be a setting to enable automatically capitalizing the first letters of the inputted words here, since people easily tend to type lowercase even when they shouldn’t.

Compared to my first suggestion, adding a new value would be a significantly different experience.
This might be a good thing though, possibly preventing any accidental new values and such, especially if there was the need of clicking “Save”.
And then there’s this button to put somewhere in the first place, while the other suggestion doesn’t need one.
Probably there are several upsides and downsides to both of these suggestions, in terms of developing, implementing and using.
Feel free to take your pick :)