how to make Semantic UI dropdown with allowAdditions work

Question

I am trying to have a Semantic UI dropdown menu which allows additions but I can seem to make it work. Indeed the Add <b>{term}</b> message that is supposed to appear when adding something never seem to show up.

Here is a very simple example to test it http://jsfiddle.net/pybxztu2/8/

If type johny in the search the message doesn't show. Though if I press enter it is going through the onChange function.

In addition, is it even possible to have such a menu where it would be able to add bob : even with the forceSelection: false it takes boby by default...

Maybe I am just missing something in the Semantic UI doc...

Answer 1

It's not properly documented in examples, but all you have to do is added another option in the dropdown initialisation like this:

$('.ui.dropdown').dropdown({
  allowAdditions: true,
  forceSelection: false,
  hideAdditions: false, // this line
  onChange: function(value, text) {
    document.getElementById('output_span').innerHTML = text
  },
});

This will show Add <name> in the dropdown

The property is mentioned in the settings tab

hideAdditions: When disabled user additions will appear in the results menu using a specially formatted selection item formatted by templates.addition.