jQuery UI Autocomplete doesn't fit well with Bootstrap's style. The typeahead dropdowns should be consistent with Bootstrap dropdowns style. I suggest adding an option typeahead similar to autocomplete which would use the Twitter Typeahead plugin instead of jQuery UI Autocomplete.

Feature Request or perhaps just misunderstanding the docs, but is there a way that the input can be restricted to only what is selected from the (bootstrap) typeahead? Not wanting invalid inputs to get included.

User should be able to provide a validate method that will be used to validate the token just before creating it. If the validation fails, the token may either be created, but formatted differently, or prevented from being created in the first place.

deleting multiple tokens at once gives the following token object in removeToken event:

{
    value: "value of the last token in a set of tokens", 
    label: "concatenated labels of all tokens in a set"} 
}

To fix this getTokenData should do something like this:

    getTokenData: function(token) {
      var $token;
      return token.map(function() {
              $token = $(this);
              return {
                  value: $token.data('value') || $token.find('.token-label').text(),
                  label: $token.find('.token-label').text()
              }
          }).get();
    }

Also getTokens method should be changed to:

getTokens: function(active) {
      var self = this
        , tokens = []
        , activeClass = active ? '.active' : '' // get active tokens only
      this.$wrapper.find( '.token' + activeClass ).each( function() {
        tokens.push( self.getTokenData( $(this) )[0] )
      })
      return tokens
  }

I love tokenfield, thank you for it. Yet I see problems in FireFox - it doesn't add new 'tag' when pressing comma. Also if user types in a new tag, like if there is [one] [two] [three] and I type 'four' without pressing comma or enter, then .tokenfield('getTokensList') returns only the first three, not all four. I would assume it returns all four, even those which are not 'converted' from text to tag.

I hope you can fix this. I'm willing to spend some money on this, just let me know! :) Thanks

There is mention about 'triggerKeys' in the documentation (http://sliptree.github.io/bootstrap-tokenfield/#options). But instead of 'triggerKeys' another option should be used 'delimeter'.

Thanks for your great work!

There are some issues with the width of wrapper and input on some cases

Seems like there is an issue with grouping styles. If I want to append a tag icon to the input field which gets tokenfield'ed (see bootstrap input groups), then the appended icon is wrong.

Check for duplicates should be done after "beforeCreateToken" cause after this event token data can be changed and if so the previous duplicates check is not valid.

After adding one or more tags, we would want to update the typeahead with latest set of values which we get separately.

But when we try to reinitialise the typeahead it does not get updated

For example if we call the below lines, the data from 1st call only is used and not the second set

$('#seltags').tokenfield({
typeahead: {
valueKey: 'tag',
local:$scope.devicetags,
engine: Hogan
},
allowDuplicates: false
});

$('#seltags').tokenfield({
typeahead: {
valueKey: 'tag',
local:$scope.newdevicetags,
engine: Hogan
},
allowDuplicates: false
});

Here is a jsfiddle with the problem
http://jsfiddle.net/Srisudhir/yDzbf/1/

I was expecting that the type ahead would give me green, red in typeahead but it is giving me only blue, white

Hi guys,

I need to support tokenisation of data like 1115 Broadway, LLC.
I know the delimiter is being used as a comma itself, but is there any workaround ? ...

Thanks guys.

loved the plugin, thank you so much!

1. How would I check to see if the token I'm about to create exist in the source and if not insert it into the source of the tokens?
2. when I use create token it only append in the text box but not into the source of the tokens
3. Is there a destroy function?
4. I'm clearing the tokens (in the text box, not the source) with jQuery, is there a clear function?

Thank you so much!

Suggestion: the copied input field could copy "placeholder" attribute from the original input.

Tokenfield should setTokens when original input triggers change. This allows other plugins (e.g. Knockout) to update the original input and Tokenfield to reflect the changes accordingly.

Typeahead support is a great addition to Tokenfield, thanks! I notice just one issue: when you type a token that isn't one of the suggested, when losing focus the string reappears on the input field. This affects the example on http://sliptree.github.io/bootstrap-tokenfield/ too (try to type foo, press TAB and blur).

Hello, thanks for the great new release! :)
I think createTokensOnBlur is missing in documentation. It works though.

I would like to kindly ask you to document also how to access the input element itself to attach own events on blur or click for example. I used $('#tags').data('tokenfield').$input.val() for example, but this throws an exception now (Cannot read property '$input' of undefined). Will be great if this can be documented too.

Thank you very much!

http://sliptree.github.io/bootstrap-tokenfield/ in firefox mac does not show tags: its just an ordinary text field with commas separating the values (on both top example pages). Error message in console is

TypeError: window.getMatchedCSSRules is not a function

works fine in safari and chrome

Hi there,
Is it possible to limit number of tokens in a field? I couldn't find it in documentation.

Thanks.

P.S. I like this tokenfield. It's the best I have found on the internet. Simple and fast.
Great job.

The following results in a tokenfield that does not seem to grow/scroll as the content within it grows.

<div class="row">
    <div class="col-lg-2">
        <input type="text" placeholder="potatotototototototot" id="test"/>
    </div>
</div>
<script>
$('#test').tokenfield({allowDuplicates: true})
</script>

Hello, I am using the typeahead as below

            $("#tokenfield-typeahead").tokenfield({
                typeahead: {
                    name: 'tags',
                    remote: {
                        url: SOMEURL
                    },
                    valueKey: 'name',
                    template: '<p class="">{{name}}</p>',
                    engine: Hogan
                }
            });

Now, I want to save the data-value as the value from JSON and display the selected value as the name from the JSON

The json comes as

[{"name":"Name","value":"VALUE"},{"name":"Name","value":"VALUE"},{"name":"Name","value":"VALUE"},{"name":"Name","value":"VALUE"}]

I wish that in the dropdown the name is displayed and when selected in the box also the name should be displayed but the actual value saved in the data-value attributed should be the value field from the JSON.

Any pointers?

When tokenfield is configured to disable duplicate tags and you enter duplicate tag, form gets posted.

I think duplicate tag should still prevent the default action.

I think below lines should be at the top of the function rather than at the end.
https://github.com/sliptree/bootstrap-tokenfield/blob/master/bootstrap-tokenfield/bootstrap-tokenfield.js#L631

I am willing to send PR, if this change is ok.

The following will result in a tokenfield which will have the placeholder cut off.

<input type="text" placeholder="This is maybe possibly questionably unknowingly not working just a bit correctly." />
<script>
$(':input').tokenfield({allowDuplicates: true, createTokensOnBlur: true})
</script>

Upon adding a token, the placeholder will behave normally.

set "createTokensOnBlur" to true. Add some tokens, with input focused dblclick a token to edit it. The token you dblclicked is replaced with an input but cause of "blur" event is triggered earlier then "dblclick" event it causes all tokens to be re-rendered so the token you're trying to edit is again in a list of tokens.

when "createTokensOnBlur" is true "typeahead:selected" event handler never executed

You current implementation doesn't handle validation border correctly - when field with tokens inside .has-error receive focus then border around input became blue instead of red plus inner input used to enter tokens get red border - so we've wide blue border around small red border - two border on same (visually) input.

Fix is to move border styles from tokenfield-typeahead.css .has-error .twitter-typeahead .tt-* to bootstrap-tokenfield.css .has-error .tokenfield.focus - you can see example implementation here: powerman/bootswatch@d6b42c0

Also I make .less version of your .css to make it easier to generate .css for custom bootstrap theme - if you like this idea you can take them from my repository (conversion probably isn't complete, but works for me and can be used as starting point).

If I type in some tags, like "apple, orange, banana", then tokenfield-ed input usually doesn't catch me pressing the comma key ",", because I type it very fast, thus I am releasing the comma AFTER pressing the space key:

1. comma key is pressed (is typed in, but tokenfield doesn't tokenize tags)
2. space key is pressed (space is typed in, tokenfield still doesn't tokenize tags)
3. comma key is released, still no tokenized tags
4. space key is released, still no tokenized tags.

This way I can type in many comma separated tags without them being tokenized at all.

It seems like you're monitoring keyUp event, I think we should monitor comma keyDown event rather than keyUp. Just a guess. Thank you

It would be grate to have div wrapper for tokens for styling purposes. Ex., limit max-height of tokens wrapper but input should always be visible.

Workaround:

// line 42
    // Create a wrapper
    this.$wrapper = $('<div class="tokenfield form-control" />')
    this.$tokensWrapper = $('<div class="tokens-wrapper" />').appendTo(this.$wrapper)

// line 171
      var token = $('<div class="token" />')
            .attr('data-value', value)
            .append('<span class="token-label" />')
            .append('<a href="#" class="close" tabindex="-1">&times;</a>')
            .appendTo(this.$tokensWrapper)

//      // Insert token into HTML
//      if (this.$input.hasClass('tt-query')) {
//        this.$input.parent().before( token )
//      } else {
//        this.$input.before( token )
//      }

// line 398
var prev = this.$input.hasClass('tt-query') ? this.$input.parent().prev().find('.token:last') : this.$input.prev().find('.token:last')

Thanks for the awesome work! It would be great if it was possible to reorder the tokens by dragging and dropping them within the field...

I noticed that bootstrap-tokenfield doesn't work very well with bootstrap 3, for example the width of tokenfield input doesn't update properly in row divs using bootstrap 3, probably because it uses class="col-sm-" instead of class="span" ? Or maybe the issue is there also with bootstrap 2? I didn't test that, I assume it's just a problem of bootstrap 3

Also the height of input field in bootstrap 3 seems to be different than the height set by tokenfield.

Is there any plan to support bootstrap 3 ?
Thank you very much

I suggest a feature that allows to limit the maximum number of tokens allowed.

It would be great to have a possibility to set a key code on which to create a token. For example if I have a field for e-mails I'd like to have tokens created on space key press.
I've added the following to make it work.

line 482

case 9: // tab
case 13: // enter
case this.options.createTokenOnKey: // custom set

line 888

$.fn.tokenfield.defaults = {
    minWidth: 60,
    minLength: 0,
    allowDuplicates: false,
    autocomplete: {},
    typeahead: {},
    showAutocompleteOnFocus: false,
    createTokensOnBlur: false,
    createTokenOnKey: null
  }

If duplicate tags aren't allowed, when using a horizontal form then the form is submitted when pressing enter the accept try to accept a duplicate tag

Hello, I am having issues with tokenfield.
When an input field is tokenfield-ed, it changes height.
See here:
http://jsfiddle.net/A4UJ7/2/
Click the button to see the height of tags input is changed. That shouldn't happen.

Furthermore I have one more problem.
After the tags input field is tokenfield-ed at the example above, remove the tag by clicking the X or by Delete key. You will see that while the tags input has still focus, you can notice the tags icon (right at the left of the input field) has few pixels on the left side missing. Something is probably covering it incorrectly. Hope you can see it too.

Thank you

Odd issue where a token lookup from a dynamic source using the bootstrap typeahead (not the jQuery one) only lets me choose a value by hitting the ENTER key. Clicking on the item doesn't do anything other than close the typeahead results.

I don't see the "beforeCreateToken" or "afterCreateToken" event firing at all.

I use tokenfield in a way like

.tokenfield({
    'typeahead':{
        name: 'some-name',
        valueKey:'name',
        prefetch: {
            url:'/api/some-name',
            filter:function(objects){
                $(objects).each(function(index, object){
                    object.tokens = object.name.match(/[^ -_]+/g);
                });
                return objects;
            }
        }
    }
})

/api/some-name returns dataset like [{'name':'Isaak Newton','id':'1'},{'name':'Albert Einstein','id':'2'}], so you see, why I define object.tokens.

I want to use object.id then to populate some hidden input in a form. How can I do that?

Hello, it seems that $('#tags').tokenfield('getTokens') doesn't return array as I would expect. It returns the original input element object.

Hi guys,

Thanks for an amazing plugin ... well im facing a small issue though ... i have this rails code which is generating the following markup :
https://gist.github.com/akashdevaraju/7221561

But the width of the token-input field dosent get reset (stays at 0 after reaching 0) causing the field to overflow.

Im using simple_form in my app ...

Kindly help with the issue ...

Regards
-Akash

Using a JSON object with value (int ID) and a label (string) and the tokens are automatically sorting by the value.

Any way to toggle the sorting?

There are some issues with Firefox when using Typeahead. Possibly other browsers as well.

Or the generated input used for typing should copy this attribute from the provided original input, if attribute is specified

When removing the LAST token/tag, the ajax call is not working. With firebug, not http request is happening. Other tags/token can be correctly removed.

Is there a way that the creation of a token can be prevented in the beforeCreateToken event?

eg, If we want to inspect the value/label to decide whether the creation should proceed.

Hi, thank you for this plugin.

it's possible to add a custom parameter like this

$('input').tokenfield('createToken', { value : 'Value', label: 'Label', creation : 'auto' });

Note the custom parameter 'creation'.

Thank you!

This can be nulled so that the intention to edit can be cancelled much like the issue and fix in #20

Tokenfield triggers a change event for each token on initialization, e.g. if I apply Tokenfield on an <input> with a value of foo,bar,baz Tokenfield triggers on that <input> a change event three times, with values of foo, foo,bar and foo,bar,baz respectivley. This should not happen, since the <input> hasn't changed.
See http://jsfiddle.net/7RTKL/

You set .twitter-typeahead to display: inline-block and this result in some side-effects (for example, extra margin below input noticeable in multiline .form-horizontal configured to have no space between rows with inputs using .form-group {margin-bottom: 0;}).

Anyway, it's recommended to always use inline-block with vertical-align:

.twitter-typeahead {
  vertical-align: top;
}

If the form-group element has

direction:rtl;
text-align:right;

then the width of the token-input is miss-calculated and starts of narrow and get wider as you add tags.

Also also the styles for the inputs need to be
right: -10000px (instead of left)
when using an RTL layout

It would be great if we can cover the existing functionality with tests. If anyone is willing to contribute, I am all ears!