Tags input : Added some features i needed for my use, based on Fat https://gist.github.com/2411033 implementation like : comma will now trigger a new tag, a cloned input is created and original input gets updated with tags value, some css tweaks...

bootstrap-tokenahead.js

!function ($) {
 
  "use strict"; // jshint ;_;
 
 
 /* TOKENAHEAD PUBLIC CLASS DEFINITION
  * ================================== */
 
  var Tokenahead = function (element, options) {
    this.$wrapper = $(element)
    this.$measurer = $('.measurer', this.$wrapper)
    this.$tokens = $('.tokens', this.$wrapper)
    this.$originalInput = $('input', this.$wrapper)
    this.$clonedInput = $('input', this.$wrapper).clone().appendTo(this.$wrapper).attr('id','fake-input').attr('name','fake-input').val('')
    this.$originalInput.hide()
    $.fn.typeahead.Constructor.call(this, this.$clonedInput, options)
  }
 
  Tokenahead.prototype = $.extend({}, $.fn.typeahead.Constructor.prototype, {
 
    constructor: Tokenahead
 
  , updater: function (item) {
      this.addToken(item)
      return ''
    }
 
  , addToken: function (item) {
      var token = $(this.options.token)
        , text = $('<span></span>').text(item).appendTo(token)
      token.appendTo(this.$tokens)
      var tokenValue = $("span", this.$tokens).not(".close").map(function() {
		return $(this).text();
	  }).get();
      this.$originalInput.val(tokenValue)
    }
 
  , listen: function () {
      var that = this
 	  if(that.$element.val() || that.$tokens.children().length!=0){
	  	that.$element.attr("placeholder", "");
	  	that.$element.css("width","30")
	  }
      $.fn.typeahead.Constructor.prototype.listen.call(this)
 
      this.$wrapper
        .on('click', 'a', function (e) {
          e.stopPropagation()
        })
        .on('click', '.close', function (e) {
          $(this).parent().remove()
	      var tokenValue = $("span", that.$tokens).not(".close").map(function() {
			return $(this).text();
		  }).get();
		  that.$originalInput.val(tokenValue)
          that.$element.focus()
        })
        .on('click', function () {
          that.$element.focus()
        })
 
      this.$element
        .on('focus', function (e) {
          that.$wrapper.addClass('focus');
          that.$element.attr("placeholder", "");
          if (!that.$element.val()) return that.isEmpty = true
        })
        .on('blur', function (e) {
          that.$wrapper.removeClass('focus')
        })
        .on('keyup', function (e) {
          var tokens
            , value

          if ((e.keyCode == 188 || e.keyCode == 13 )&& that.$element.val() != ',' && (value = that.$element.val())) { //enter with no menu and val
            that.$element
              .val('')
              .change()
            
            if(value.charAt(value.length-1) === ","){
              that.addToken(value.substring(0, value.length-1))
            }else{
              that.addToken(value)
            }
            return that.$element.focus()
          }
 
          if (e.keyCode != 8 || that.$element.val()) return that.isEmpty = false//backspace
          if (!that.isEmpty) return that.isEmpty = true
          tokens = $('a', that.$tokens)
          if (!tokens.length) return
          tokens.last().remove()
          
          var tokenValue = $("span", that.$tokens).not(".close").map(function() {
			return $(this).text();
		  }).get();
		  that.$originalInput.val(tokenValue)
        })
        .on('keypress keydown paste', function (e) {
          if(e.keyCode == 13){
          	e.preventDefault();
          }
          var value = that.$element.val()
          that.$measurer.text(value)
          that.$element.css('width', that.$measurer.width() + 30)
        })
    }
 
  })
 
 /* TOKENAHEAD PLUGIN DEFINITION
  * ============================ */
 
  $.fn.tokenahead = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('tokenahead')
        , options = typeof option == 'object' && option
      if (!data) $this.data('tokenahead', (data = new Tokenahead(this, options)))
      if (typeof option == 'string') data[option]()
    })
  }
 
  $.fn.tokenahead.Constructor = Tokenahead
 
  $.fn.tokenahead.defaults = $.extend($.fn.typeahead.defaults, {
    token: '<a class="tag"><span class="close">&times;</span></a>'
  })
 
}(window.jQuery)

index.html

<div class="input-large uneditable-input tokenahead">
    <div class="measurer"></div>
	  <div class="tokens"></div>
    <input type="text" autocomplete="off" placeholder="tags..."/>
</div>

<script>
$(function () {
  $('.tokenahead').tokenahead({
    source: ["ruby", "java", "html", "css"],
  	matcher: function(item) {
		item = $.trim(item);
        return item.toLowerCase().substr(0, this.query.length).indexOf(this.query.toLowerCase()) !== -1
   	}
  })
})
</script>

Tokenahead.css

.tokenahead {
  cursor: text;
  overflow: hidden;
  height: auto;
  padding-bottom: 0;
  border-color:#ccc;
  background-color:white;
}
.focus{
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted 9;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);   
}
.tokenahead a.tag {
  cursor: default;
  float: left;
  display: inline-block;
  border: 1px solid #ccc;
  text-decoration: none;
  padding: 0 4px;
  margin: 0 3px 3px 0;
   -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
 
.tokenahead a:hover {
  color: #08c;
}
 
.tokenahead span.close {
  font-size: 14px;
  line-height: 14px;
  margin-left: 4px;
}
 
.tokenahead .measurer {
  position: absolute;
  top: -1000px;
}
 
.tokenahead input {
  border: none;
  box-shadow: none;
  outline : none;
  float: left;
  margin: 0 0 5px;
  padding: 0;
  width: 100px;
}
.tokenahead input:focus {
  border-color: none;
  outline: 0;
  outline: thin dotted 9;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

This works quite well!

I've had to comment out the "&& !that.shown" part of line 75 though, otherwise typing a comma while the typeahead popup is shown doesn't create a tag / token. Am not sure if this is the correct fix though?

Glad it was of some use for you.

Thanks for the "&& !that.shown" i think you are right, i'll remove it

created a fiddle for anyone interested: http://jsfiddle.net/JjJeV/