Bootstrap-select: Editable combobox

[swilczynski]

Is there any chance to add functionality to enable adding new options using input field?

It could for example take argument data-editable="true" then select would turn into input field with dropdown options so I could select from existing items or manually enter new one

[Khrysller]

+1

[rhamilto]

+1

[palamccc]

+1

[dvlden]

+1

[wilsoncook]

+1

[drew-dulgar]

847 has been submitted as a pull request.

[jxiaox]

+1

[Tomas-M]

+1

[Tomas-M]

Solution from #847 is ugly.
Here is nicer example:
http://jsfiddle.net/2wvc3Lj5/8/

Unfortunately I do not know how to properly modify bootstrap-select sources to provide this functionality. In ideal case, as there is a select option for the separator (data-divider="true"), there could be similar way to specify that certain option field could react as row to add new values to select. Like:

<option data-addnew="true"></option>

[Khrysller]

Nice, but the add option should be on top, instead of the bottom.

[Tomas-M]

No, it should be at the bottom. Well actually, it should be at any place where you desire, of course, somebody will prefer on top, somebody like me on bottom. For that reason I suggested to allow the user to add an option which would be transformed into the add-new-input box, as like there is special data-divider=true parameter which can transform any option to a divider.

[Tomas-M]

From my point of view, having it on bottom is better for my purposes, since the user will in 99% of cases just select from the offered items, and 1% of cases will be used to add new item to the list. While thinking about it, if it is allowed to put it both on top or bottom, then there should be perhaps also a parameter which tells where to insert the item - as first or as last option, regardless if the position of the input field is on top or bottom of the list.

[Khrysller]

Yeah. you are right. There should be a parameter. Think about having 200 itens and trying to add another one, if the option is on top is ok. If the option is on bottom, you need to scroll.

[Tomas-M]

Updated to fix some issues.
http://jsfiddle.net/2wvc3Lj5/8/

This is just for the developer of bootstrap-select, to show how the design could be done, not how the implementation (I am no expert). I would appreciate if caseyjhol comments if he likes the design in general.

[caseyjhol]

This feature is a high priority, but I'm still not 100% what the best implementation is. The more examples or suggestions the better. I would love to get something like this added, but I haven't seen anything yet that seems super intuitive.

Something like http://selectize.github.io/selectize.js/? Maybe completely move the search input out of the menu and have it replace the button (similar to the Single Item Select example)? I guess we could just make that an option too (for legacy support).

[niteshluharuka]

Are we getting this feature in near future?

[shaunroot]

+1

[JTCE]

+1 anything I can do to help?

[JTCE]

I like the approach from jquery-editable-select
Best part for me, is the fact it's jQuery based.
It can certainly be stripped down to fit this plugin.

@caseyjhol, @silviomoreto thoughts?

[silviomoreto]

@JTCE If you could create this feature I would be glad to merge it

[niteshluharuka]

@JTCE, the link doesn't work!

[JTCE]

@niteshluharuka I goofed on the link syntax. Fixed the above comment and placing it here also:
jquery-editable-select

[JTCE]

@silviomoreto I'll review the possibilities as your plugin is the preferred for my current project and I'd have to add the editable text anyway. Unfortunately I'm taxed on a couple other projects also.

Time, the one commodity we can't buy and always seems to be a lack thereof.....sigh.

[rmatcar]

+1
Really interested in this!

[fraserr]

+1

[owensco]

+1 excited for this!

[alijamal14]

+1 @caseyjhol

[dropways]

hello all

I have try to do it here is the solution for Add options dynamically.

_https://codepen.io/ankithingarajiya/pen/NQNvMe_

[n2lose]

@dropways : It works fine, thank you.
Just have a small issue, when we init the selectpicker and add new option, I also init the change.bs.select event to get the selected value on change.

$('#mySelect').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
// do something...
});

So, the when we change the default option, the change.bs.select event will fire and we can get the selected value. But when we add new option, when select it, this event doesn't fire and we can not get the selected value.
How we can update or re-init this event on change?

[RebelTank]

Hello. I have created a simple somewhat hacky solution that uses the live-search feature to allow users to add their own custom options on the fly. Please see the Stack Overflow post: https://stackoverflow.com/questions/65128776/bootstrap-select-editable-combobox-hack/65128777#65128777
This works with Bootstrap 4 which was a big requirement for me.