diff --git a/docs/assets/js/bootstrap-typeahead.js b/docs/assets/js/bootstrap-typeahead.js index 1426185afc45..58082d5dce4c 100644 --- a/docs/assets/js/bootstrap-typeahead.js +++ b/docs/assets/js/bootstrap-typeahead.js @@ -30,7 +30,10 @@ this.$menu = $(this.options.menu).appendTo('body') this.source = this.options.source this.shown = false + this.delimiter = this.options.delimiter || this.delimiter this.listen() + this.mode = this.options.mode || this.mode + this.selections = [] } Typeahead.prototype = { @@ -39,10 +42,26 @@ , select: function () { var val = this.$menu.find('.active').attr('data-value') - this.$element.val(val) + if( this.mode === 'multiple' ) { + this.selections.push(val) + val = this.selections.join(this.formatteddelimiter()) + if (val.length) val += this.formatteddelimiter() + } + this.$element.val( val ) return this.hide() } + , pop: function () { + var val = null + if( this.mode === 'multiple' ) { + this.selections.pop() + val = this.selections.join(this.formatteddelimiter()) + if (val.length) val += this.formatteddelimiter() + } + this.$element.val( val ) + return this + } + , show: function () { var pos = $.extend({}, this.$element.offset(), { height: this.$element[0].offsetHeight @@ -68,8 +87,9 @@ var that = this , items , q + , input = this.mode === 'multiple' ? this.$element.val().split(this.delimiter) : [this.$element.val()] - this.query = this.$element.val() + this.query = $.trim(input[input.length - 1]) if (!this.query) { return this.shown ? this.hide() : this @@ -164,15 +184,23 @@ .on('mouseenter', 'li', $.proxy(this.mouseenter, this)) } + , formatteddelimiter: function(){ + return this.delimiter + ' ' + } + , keyup: function (e) { e.stopPropagation() e.preventDefault() - + switch(e.keyCode) { case 40: // down arrow case 38: // up arrow break + case 8: // backspace + if (this.mode === 'multiple' && !this.shown) this.pop() + break + case 9: // tab case 13: // enter if (!this.shown) return @@ -191,6 +219,10 @@ , keypress: function (e) { e.stopPropagation() + + if (e.keyCode === 8 && this.mode === 'multiple' && !this.shown) + e.preventDefault() + if (!this.shown) return switch(e.keyCode) { @@ -251,6 +283,8 @@ , items: 8 , menu: '' , item: '
  • ' + , delimiter: ',' + , mode: 'single' } $.fn.typeahead.Constructor = Typeahead diff --git a/docs/javascript.html b/docs/javascript.html index 7960a29e39f8..5bab801d1441 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -1418,6 +1418,18 @@

    Options

    highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html. + + mode + string + single + Setting used to allow single or multiple items to be selected from the autocomplete results. Accepts a single value of either 'single' or 'multiple'. + + + delimiter + string + , + Delimiter used to seperate selected autocomplete results from one another. Only used when setting 'mode' is 'multiple'. + diff --git a/js/bootstrap-typeahead.js b/js/bootstrap-typeahead.js index 35e11526ec1e..58082d5dce4c 100644 --- a/js/bootstrap-typeahead.js +++ b/js/bootstrap-typeahead.js @@ -44,12 +44,24 @@ var val = this.$menu.find('.active').attr('data-value') if( this.mode === 'multiple' ) { this.selections.push(val) - val = this.selections.join(this.delimiter) + val = this.selections.join(this.formatteddelimiter()) + if (val.length) val += this.formatteddelimiter() } this.$element.val( val ) return this.hide() } + , pop: function () { + var val = null + if( this.mode === 'multiple' ) { + this.selections.pop() + val = this.selections.join(this.formatteddelimiter()) + if (val.length) val += this.formatteddelimiter() + } + this.$element.val( val ) + return this + } + , show: function () { var pos = $.extend({}, this.$element.offset(), { height: this.$element[0].offsetHeight @@ -172,15 +184,23 @@ .on('mouseenter', 'li', $.proxy(this.mouseenter, this)) } + , formatteddelimiter: function(){ + return this.delimiter + ' ' + } + , keyup: function (e) { e.stopPropagation() e.preventDefault() - + switch(e.keyCode) { case 40: // down arrow case 38: // up arrow break + case 8: // backspace + if (this.mode === 'multiple' && !this.shown) this.pop() + break + case 9: // tab case 13: // enter if (!this.shown) return @@ -199,6 +219,10 @@ , keypress: function (e) { e.stopPropagation() + + if (e.keyCode === 8 && this.mode === 'multiple' && !this.shown) + e.preventDefault() + if (!this.shown) return switch(e.keyCode) {