Semantic-ui: How to use 'space' to separate tags in a multiple search selection dropdown?

Created on 10 Apr 2017  路  2Comments  路  Source: Semantic-Org/Semantic-UI

I have a form that contains a multiple search selection dropdown (with the setting allowAdditions: true). I want users to be able to insert tags in there. In my application, tags are always lowercase, and cannot contain spaces.

I would like to override Semantic UI's handling of the space character when it is used in the search input that it generates in the multiple search selection dropdown, so that it works the same way that enter and tab work, in that the current selection is changed into a new tag. How can this be done?

As a side note, in many browsers, pressing enter in this input auto-submits the whole form, making it rather important in my opinion that it is possible to alluw the use of another key to convert the latest input into a new tag.

Usage Question

Most helpful comment

Hi @Qqwy, the easiest way is to override it in the keys object that you can find at the bottom of the dropdown component鈥檚 documentation:

$('.ui.dropdown')
  .dropdown({
    allowAdditions: true,
    keys: {
      delimiter: 32, // 188 (the comma) by default.
    }
  })

You could also assign the space key to enter property instead.

Thank you for posting, but although it鈥檚 a valid usage question, we鈥檝e limited GitHub Issues to bug reports and feature requests, keeping the board more manageable for maintainers; see the contributing guidelines for more information on what kind of posts should find themselves into the GitHub Issues board.

Please use one of our other support resources in the future:

All 2 comments

Hi @Qqwy, the easiest way is to override it in the keys object that you can find at the bottom of the dropdown component鈥檚 documentation:

$('.ui.dropdown')
  .dropdown({
    allowAdditions: true,
    keys: {
      delimiter: 32, // 188 (the comma) by default.
    }
  })

You could also assign the space key to enter property instead.

Thank you for posting, but although it鈥檚 a valid usage question, we鈥檝e limited GitHub Issues to bug reports and feature requests, keeping the board more manageable for maintainers; see the contributing guidelines for more information on what kind of posts should find themselves into the GitHub Issues board.

Please use one of our other support resources in the future:

I want to apologize for not having read the contributing guidelines before creating this issue, and will use the forums in the future.

Thank you very much for still swiftly answering my question!

Was this page helpful?
0 / 5 - 0 ratings