In your example page the typeahead suggestion pull-down disappears as soon as you enter a second character.

Since there will be more typeahead options, the following

{ source: ... }

Should be:

{ typeahead { source: ... } }

Direct source option will be supported for a few releases, but deprecated

hi,
may i suggest the following features to make this more beautiful

-ability to have options to confirm Tag, right now only Enter key is used, we may have space Key and Tab key too

• i have noticed in the examples if you type a new tag that is not in the source data when Ajax is used as source, you cant enter it, thus will prevent users from adding new values that are not there in the Ajax operation
• have a minimum characters entered before issuing Ajax to improve performance
  -have a way to validate the tag before approving it
• a way to edit the tag instead of removing it and retyping the desired one, maybe you made spelling mistake, so there is no need to delete, just click on the tag and edit.
  -if user clicks ESC button the entered text should be cleared
  -events on adding, editing, deleting, initializing

thanks in advanced.

Array of keycodes which will add a tag when typing in the input. Default value is [13]

hi,

When item is an object, i cannot remove it from the tagsinput. I have checked the source code, it is trying to find item by "$(this).data("item) === item", but it failed if item is an object.

I suggest you should look for value to remove associated item.

My Best,
Hung Tran

It looks like the ngModel is not updating until the next digest cycle when adding and removing items under 1.2.0-rc.2. Haven't tried until 1.1.5.

Do we need to add calls to scope.$apply on itemAdded and itemRemoved?

    select.on('itemAdded', function(event) {
      if (scope.model.indexOf(event.item) === -1)
        scope.model.push(event.item);
      try {
        scope.$apply();
      } catch (error) {

      }
    });

    select.on('itemRemoved', function(event) {
      var idx = scope.model.indexOf(event.item);
      if (idx !== -1)
        scope.model.splice(idx, 1);
      try {
        scope.$apply();
      } catch (error) {

      }
    });

Get plug-in but can't set typeahead successfully.

In my code, or from the console, , or doing this to an input from the console on your examples page), I get an error trying to define typehead

TypeError: Property '#' of object # is not a function (line 434)

$('#add_tag_new_tag').tagsinput({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
}
});

Any idea of what I am doing wrong?

Hi,

I am currently working on an an AngularJS project, using your Tagsinput plugin. It would be nice to have a disabled and a placeholder attribute for the AngularJS plugin.

I'd like to fork your plugin and add it, pushing it back to you afterwards by myself if it is good for you.

What do you think about this?

When I type a custom tag which is not in list it is added to tags, but after I click anywhere on the site pure text is automatically added to the end of the list...

test taken on your page

It would be great if the input field would send the 'return' key event to the enclosing form when no typing is going on.

This would be useful to search by tags: after the last tag is typed and confirmed by return, and no character is typed, the return key event would trigger the search.

hi,

I think when source is defined and freeInput is false, the current text should be clear if nothing is matched when the input lost focus.

My Best,
Hung Tran

I'm trying to use this plugin for a textarea for tagging. How can I use it on a textarea rather than an input?

its sometimes hard to understand why a tag isn't added when you enter a duplicate. i like it when the existing tag quickly flashes so you know its already there.
not posting this as a pull request because i'm sure it could be done in a nicer way.

  // ~ line 80
  if ($.grep(self.itemsArray, function(item) { return self.options.itemValue(item) === itemValue; } )[0]){
    $.each( self.$container.find( ".tag" ), function( i, e ){
      if( self.options.itemValue( $(this).data( "item" ) ) == itemValue ){
        $(this).hide().fadeIn(); 
      }
    } ); 
    return;
  }

best, hansi.

hi,

I cannot figure myself out how could to style or customize html of li for matched items.

Any help will be very appreciated!

My Best,
Hung Tran

Hello! The examples page does not include any documentation for events tagsinput triggers.

Though a quick search through the plugin js reveals what can be used it would be helpful for those unfamiliar with tagsinput to have the heads up in documentation.

I don't mind whipping up some quick markup for an events section either if you'd like the help.

BecausenTwitter Bootstrap provides LESS files

Nr of ms before querying typeahead source

There is an issue with autocomplete when typing an ampersand where there is a "match". For example, if "Ben & Jerry" is in the autocomplete source, you can only type to "Ben " before you're no longer allowed to type. This is problematic if I wanted to add "Ben & James".

There is a workaround, you can click off and click back on and type the ampersand, or you can paste the text in there.

Not sure what the issue is, or if it's with the Bootstrap framework.

Thanks in advance!

I would just like to know if you will develop & maintain bootstrap-tagsinput in the future?

/ Martin

Hi!
Is there a reason why the angularJS example is hidden on the Bootstrap 3 page http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/ ?
I've tried to use tagsinput with Angular 1.2, Bootstrap 3 and typeahead, but I got no luck.
Anyway, thanks for this awesome project!

Implement in bootstrap-tagsinput-typeahead.js

it should be possible to only add tags to tagsinput via javascript.

I noticed this only happens with bootstrap v3 and the independent version of typeahead.

If you add a tag that is not from the suggestions and focus off the input field, it will contain the value of the newly added tag.

Steps for recreating:

1. Go to the typeahed example for bootstrap 3 (http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/)
2. Enter "dog"
3. Focus off the input

I think this.tagsinput('input').typeahead('setQuery', ''); takes care of clearing out the input value when suggestions are selected. What I did for a workaround is to call that when the "itemAdded" event was triggered.

See code @sha: ad6dca9

Hi,

I tried to include your plugin, but I ran into serious problems. Maybe you can help me.When I add the input box and asign the data-role without any javascript, everything works like a charm:

<input type="text" id="ingredientsList" data-role="tagsinput"/>

However, as soon as i add the JavaScript:

ingredientsInput = jQuery("#ingredientsList")
ingredientsInput.tagsinput();

I'm getting this error message:

Uncaught TypeError: Property 'undefined' of object #<b> is not a function 

Adding typeahead doesn't work aswell. I tried lots of variations, last one was this:

ingredientsInput = jQuery('#sidebar input')
        ingredientsInput.tagsinput();

        ingredientsInput.tagsinput('#sidebar input').typeahead({
             local: ['hallo', 'hihi']
        }).bind('typeahead:selected', jQuery.proxy(function (obj, datum) {  
            this.tagsinput('add', datum.value);
            this.tagsinput('#sidebar input').typeahead('setQuery', '');
        }, ingredientsInput));

which spilled out

Uncaught TypeError: Object #<b> has no method '#sidebar input' 
Uncaught TypeError: Property 'undefined' of object #<b> is not a function 

What could be the problem here? Please help me!

Greetings, Thomas

Depend on Twitter Tyoeahead, or build a simple one self?

I want the tags input to commit a tag whenever users pressed ENTER or COMMA keys. However, if you do it as in:

$('input[data-role=tagsinput]').tagsinput({
    confirmKeys: [13,188], // {ENTER} and {COMMA}
 });

Then SHIFT+COMMA also triggers it, when I was trying to enter a "less than(<)" sign.

Hi, I've looked around and can't find a way to set a maximum number of allowed tags, after which you can't keep on adding them.

Any help?

I guess this might not be much of an issue unless you use freeinput.

If a user types in a tag and then clicks outside the input field so that it loses focus, the typed in text is still text. I'd like an option to turn this text into a tag on blur.

An ugly workaround:
$('.bootstrap-tagsinput input').blur(function() {
$('.myinputfield').tagsinput('add', $(this).val());
$(this).val('');
});

Hi

I'm trying to include the bootstrap-tagsinput with typeahead.js in my angularjs app.
This is the order of loading js items:

1. jQuery 2.0.3
2. angular 1.2.0
3. bootstrap-tagsinput.js
4. typeahead.min.js
5. bootstrap-tagsinput-angular.js
6. bootstrap.min.js
7. my App.js and this uses ['bootstrap-tagsinput', 'bsTagsinput']
8. bsTagsInput.js

But i can't get it to work

This is the html I use:

And this is in my controller:
$scope.tags = ['Amsterdam', 'Washington'];
$scope.tagsTypeahead = {
local: ['Sydney', 'Beijing', 'Cairo']
}

So I think I've got everything / more that I need, but I keep getting the error
"TypeError: Object # has no method 'typeahead'"

Hi,
this is awesome Directive, thank you for it

but if i want to delete a tag in the demo i get this error
Uncaught TypeError: Cannot read property 'value' of undefined bootstrap-tagsinput.js:298

Configure option. This is only possible, when using strings as tags.

.bootstrap-tagsinput input {
    outline-color: transparent;
}

Add this to the styles that-be in version 2 Bootstrap was not at a border input.

This may be an issue with me misusing the module or it may be an actual issue. I'm having trouble getting the contents of the tags input control to be reflected in $scope.

                <bootstrap-tagsinput
                    ng-model="instruments"
                    typeahead-source="getInstrumentsForLookup"
                    tagclass="badge badge-info"
                    itemvalue="instrumentID"
                    itemtext="name"
                    freeInput="true">
                </bootstrap-tagsinput>

in my controller I have the following

     $scope.instruments = [
        { "instrumentID": 1 , "name": "Bass" },
        { "instrumentID": 2 , "name": "Boop" }
      ];

What happens is that the tags input control is loaded it is indeed populated with these values. However adding and deleting tags does not result in $scope.instruments having its contents changed. Am I crazy or is this a bug?

Dear TimSchlechter,

I believe there is an error in your plugin running on firefox in my case version 24.
When access to first page works perfectly, but if I reload the page (F5) the following error is returned.

TypeError: self.options.itemValue (...) is undefined
http://localhost:4749/Scripts/bootstrap-tagsinput/bootstrap-tagsinput.js
line 183

But if I click CTRL + F5 the error does not occur.

In browsers chrome and IE10 the error does not occur

You can test with own page in firefox

http://timschlechter.github.io/bootstrap-tagsinput/examples/

Leandro Ikezili

Support for $element..tagsinput('removeAll')

hi Tim,

It would be more user-friendly if you don't display selected items in dropdown when multiple is false, or at least there is a callback to let developer remove it from the dropdown list or customize the list.

At the moment, i cannot get the selected items in the context of source callback of typeahead. I have to keep the tagsInput object reference, and access to internal TagsInput object to get the selected items (it is not an official way) in order to exclude them from the result of source callback.

My Best,
Hung Tran

Is there a way I can programmatically add a tag by clicking a button?

Add tag
$('.add-tag').on("click", function(e){
e.preventDefault();
var item = { "value": 1 , "text": "Amsterdam", "type" : "1" };
$('.myinput').add('add',item);
$('.myinput').tagsinput('refresh');
})

I would like to click on that Add Tag button show in the code above for a tag to be added. Unfortunately, this does not seem to work. Any ideas?

Thanks

Emmanuel

Hi developers,

I need some information. I create my own web application in CakePHP framework, my tags are in HABTM relation to posts.

1: I have a multiple select form, which is a list of all the tags (selected and not selected)
2: The options are: value: id and text: the name of the tag
3: I'm looking for a way to initially create the span tag elements, only of the selected options.
4: typeahed source is multi select form
5: when we add a new tag, it is saved to a database via ajax, the return value is the id of the newly created tag, the id will be set as the value of the new options element.
6: when the user removes the tag, script deselect the option in a way that removes the selected attribute.

Is it possible to do this with your plugin? I start to make my own plugin, but I got a suggestion to try this plugin. Although I have no experience in writing jQuery plugin, I look into your code but I do not understand how to set the configuration.

thanks

I don't know how the build process works but if it was already generating a SASS file, which has now been changed using d540ce3, could it not generate a SASS file as well as LESS by reinstating the removed code?

Test

Is there a callback function attached to each Enter Press? If not, wish it could be implemented in the future. Nice work!

I get the following error:

My source:
$(document).ready(function () {
$('#tags').tagsinput();
});

I propose to add a new attribute to murkup:
data-class from to add classes to div.bootstrap-tagsinput

It looks like the size attribute of the tag input field grows according to the number of characters in it, but this ends up cutting off some of the tag if it has a few very wide characters (such as M or W). It might be a little clunkier technically, but would it be feasible to copy the text into an invisible element on keyup, measure its width, and then set the CSS width of the tag input box instead of using the size attribute?

I had an issue with tags that were separated like so:

tag1, tag2, tag3

which meant that they went into the itemsArray as tag1 tag2 tag3 so when I typed in tag2 it allowed it because it wasn't an exact match because one of them started with a space.

I had to add a trim at line 54 of bootstrap-tagsinput.js

item = $.trim(item);

There may be a better place to put the trim but that seemed to work.

itemText variable split into 2 variables:

1. autocomplete label
2. tag label (if empty get value from autocomplete label )

hi Tim,

At the moment, i don't know how to stop removing selected items when user keeps pressing BACKSPACE key. In my scenario, user types something not in predefined source, nothing will be happen (no dropdown, or no message tell user know) => the user will keep pressing BACKSPACE key to clean up the current text in order to start a new search => they may remove all selected items as well, it's not standard expected behavior in this scenario.

Therefore, i think it would be better to have features as following
1/ keep BACKSPACE key to remove text, but add a possibility to stop removing previous selected items
2/ there is something to tell user that there is no result
3/ implement ESCAPE key which will clean the current text up fastly => so that user will not need to keep pressing BACKSPACE for this purpose
4/ when the control lost focus, the current text should be clean up if they don't match any result.

Any help will be very appreciated!

My Best,
Hung Tran

Is there a reason why, when I start typing in the typeahead example field, the field size stays as size="1" until I have typed 4 characters because it means that at the point where there are 2 or 3 characters they are partially hidden?

Trigger the following events:

• beforeItemAdd (cancel event arg)
• itemAdded
• beforeItemRemove (cancel event arg)
• itemRemoved