Typeahead now support multiple selections

astrails · Feb 16, 2012 · e048303 · e048303
1 parent 9143d8e
commit e048303
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 3 deletions.
diff --git a/js/bootstrap-typeahead.js b/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,7 +42,11 @@
 
   , 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.delimiter)
+      }
+      this.$element.val( val )
       return this.hide()
     }
 
@@ -68,8 +75,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
@@ -251,6 +259,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/js/tests/unit/bootstrap-typeahead.js b/js/tests/unit/bootstrap-typeahead.js
@@ -125,4 +125,67 @@ $(function () {
 
         typeahead.$menu.remove()
       })
-})
+
+      test("should allow multiple selections", function () {
+        var $input = $('<input />').typeahead({
+              source: ['aa', 'ab', 'ac']
+              , mode: 'multiple'
+            })
+          , typeahead = $input.data('typeahead')
+
+        $input.val('a')
+        typeahead.lookup()
+
+        $(typeahead.$menu.find('li')[2]).mouseover().click()
+
+        $input.val( $input.val() + ',a')
+        typeahead.lookup()
+
+        $(typeahead.$menu.find('li')[2]).mouseover().click()
+
+        equals($input.val(), 'ac,ac', 'input value was correctly set')
+        ok(!typeahead.$menu.is(':visible'), 'the menu was hidden')
+
+        typeahead.$menu.remove()
+      })
+
+      test("should allow user to specify delimiter in options", function () {
+        var $input = $('<input />').typeahead({
+              source: ['aa', 'ab', 'ac']
+              , delimiter: ';'
+              , mode: 'multiple'
+            })
+          , typeahead = $input.data('typeahead')
+
+          $input.val('a')
+        typeahead.lookup()
+
+        $(typeahead.$menu.find('li')[2]).mouseover().click()
+
+        $input.val( $input.val() + ';a')
+        typeahead.lookup()
+
+        $(typeahead.$menu.find('li')[2]).mouseover().click()
+
+        equals($input.val(), 'ac;ac', 'input value was correctly set')
+      })
+
+      test("should not allow multiple selection if multiple selection mode is not enabled", function () {
+        var $input = $('<input />').typeahead({
+              source: ['aa', 'ab', 'ac']
+            })
+          , typeahead = $input.data('typeahead')
+
+        $input.val('a')
+        typeahead.lookup()
+
+        $(typeahead.$menu.find('li')[2]).mouseover().click()
+
+        $input.val( $input.val() + ', a')
+        typeahead.lookup()
+
+        $(typeahead.$menu.find('li')[2]).mouseover().click()
+
+        equals($input.val(), 'ac', 'input value was correctly set')
+      })
+})