Search code examples
javascriptcsstwitter-bootstraptwitter-bootstrap-3bootstrap-tokenfield

Adding scrollbar to bootstrap tokenfield autocomplete


I couldn't find any documentation or questions about enabling scroll bar on bootstrap's tokenfield autocomplete.

My field has a lot of users form Active Directory and it's mandatory for us to have this scroll.

  $(usersList).tokenfield({
    autocomplete: {
      source: values,
      delay: 10,
      focus: function (event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
      }
    },
    showAutocompleteOnFocus: true
  });

  //prevent adding duplicate values
  $(usersList).on('tokenfield:createtoken', function (event) {
    var existingTokens = $(this).tokenfield('getTokens');
    $.each(existingTokens, function(index, token) {
      if (token.value === event.attrs.value)
      event.preventDefault();
    });
  });

Solution

  • Found alter controller that fits me thanks to Atlassian. The controller's name is "AUISelect 2" and can be found here: https://docs.atlassian.com/aui/latest/docs/auiselect2.html

    More info about Atlassian's UI library can be found here: https://docs.atlassian.com/aui/