Merge pull request twbs#1 from worldspawn/typeahead-multiple-entries

updated docs, backspace support, usability tweak
astrails · Feb 26, 2012 · aedb743 · aedb743
2 parents e048303 + 02f5dd1
commit aedb743
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 5 deletions.
diff --git 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: '<ul class="typeahead dropdown-menu"></ul>'
   , item: '<li><a href="#"></a></li>'
+  , delimiter: ','
+  , mode: 'single'
   }
 
   $.fn.typeahead.Constructor = Typeahead

diff --git a/docs/javascript.html b/docs/javascript.html
@@ -1418,6 +1418,18 @@ <h3>Options</h3>
                <td>highlights all default matches</td>
                <td>Method used to highlight autocomplete results. Accepts a single argument <code>item</code> and has the scope of the typeahead instance. Should return html.</td>
              </tr>
+             <tr>
+              <td>mode</td>
+              <td>string</td>
+              <td>single</td>
+              <td>Setting used to allow single or multiple items to be selected from the autocomplete results. Accepts a single value of either 'single' or 'multiple'.</td>
+             </tr>
+             <tr>
+              <td>delimiter</td>
+              <td>string</td>
+              <td>,</td>
+              <td>Delimiter used to seperate selected autocomplete results from one another. Only used when setting 'mode' is 'multiple'.</td>
+             </tr>
             </tbody>
           </table>
 

diff --git 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) {