Combo box which can add new values dynamically

Webix JS
1

Hi,

I have a combo. Here are my requirements:

  1. The combo dropdown is blank(empty) initially.
  2. User should be able to type in a value that is not included in the list and that should add the item to the list.

Is there any control that allows me to do so?

Currently, I’m using a ‘suggest’ with a ‘text’. But I’m not able to get the current list items in the suggest dropdown to add new value to that. How can I get that?

Please help me!!!
Thanks a lot…

2

My Code:

{ view:“text”, width:400, label: ‘State’, labelPosition:“top”,
stringResult:true, id: ‘stateCombo’, suggest: states,
value:name, on: {
onBlur: function() {
count++;
states.push({id: (states.length+1), value:count});
webix.message($$(this).getValue());
// var list = $$(“stateCombo”).getPopup().getList(); // breaking here
// list.clearAll();
// list.parse(states);
}
}}

3

Using suggest box and text editor is the best solution for your use-case.

Check the updated snippet
http://webix.com/snippet/6ff8d71d

you was on the right track, just instead of using .parse you can use .add to add the new option to the list.

4

Hello Maksim.

I tried this but isn’t that good. when fill in one new option it should be triggered as change so I can add it in the list and can store this into db.
is there another solution for this?

Thank you
Michael

5

Hello @Michael ,
From 9.2 version the new values can be added to a “combo” view with newValues property enabled. Check the example: Code Snippet .

6

Thank you Mariya.

I didn’t know this. But onChange event how to find out this is a new input value or a selection from a given list?

And this property newValues does this also exists for view: ‘select’?

regards
Michael

7

Hello @Michael ,

And this property newValues does this also exists for view: ‘select’?

newValues is available for multicombo and combo views only. In the documentation we can find out the views for which the property exists this way:

image
image1018×244 7.78 KB

how to find out this is a new input value or a selection from a given list?

If I understood you correctly, you could get the moment when the new value is added via onAfterAdd event of the list: Code Snippet .
newValues can also be saved on the server as “inserted” list items: Code Snippet .

8

Thanks a lot MariyaDemy. I’ve got it. Mercy