From 4606c0704a2b49758602e1021e88a22956c030d5 Mon Sep 17 00:00:00 2001
From: Nikolas Martens <Nikolas.M@rtens.org>
Date: Mon, 21 Mar 2016 12:39:02 +0600
Subject: [PATCH] Allow free input

---
 js/bootstrap-combobox.js            | 20 ++++++++++-----
 js/tests/unit/bootstrap-combobox.js | 40 +++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/js/bootstrap-combobox.js b/js/bootstrap-combobox.js
index 41158f0..e19fd26 100755
--- a/js/bootstrap-combobox.js
+++ b/js/bootstrap-combobox.js
@@ -27,6 +27,7 @@
     this.options = $.extend({}, $.fn.combobox.defaults, options);
     this.template = this.options.template || this.template
     this.$source = $(element);
+    this.freeInput = this.options.freeInput || null
     this.$container = this.setup();
     this.$element = this.$container.find('input[type=text]');
     this.$target = this.$container.find('input[type=hidden]');
@@ -80,7 +81,7 @@
         }
         map[option.text()] = option.val();
         source.push(option.text());
-        if (option.prop('selected')) {
+        if (option.attr('selected')) {
           selected = option.text();
           selectedValue = option.val();
         }
@@ -98,11 +99,13 @@
   , transferAttributes: function() {
     this.options.placeholder = this.$source.attr('data-placeholder') || this.options.placeholder
     if(this.options.appendId !== "undefined") {
-    	this.$element.attr('id', this.$source.attr('id') + this.options.appendId);	
+    	this.$element.attr('id', this.$source.attr('id') + this.options.appendId);
     }
     this.$element.attr('placeholder', this.options.placeholder)
     this.$target.prop('name', this.$source.prop('name'))
-    this.$target.val(this.$source.val())
+    if (!this.freeInput) {
+      this.$target.val(this.$source.val())
+    }
     this.$source.removeAttr('name')  // Remove from source otherwise form will pass parameter twice.
     this.$element.attr('required', this.$source.attr('required'))
     this.$element.attr('rel', this.$source.attr('rel'))
@@ -177,10 +180,15 @@
     }
 
   , template: function() {
+      var freeInputAttributes = '';
+      if (this.freeInput) {
+        freeInputAttributes = 'name="' + this.freeInput.name + '" value="' + this.freeInput.value + '" '
+      }
+
       if (this.options.bsVersion == '2') {
-        return '<div class="combobox-container"><input type="hidden" /> <div class="input-append"> <input type="text" autocomplete="false" /> <span class="add-on dropdown-toggle" data-dropdown="dropdown"> <span class="caret"/> <i class="icon-remove"/> </span> </div> </div>'
+        return '<div class="combobox-container"><input type="hidden" /> <div class="input-append"> <input ' + freeInputAttributes + 'type="text" autocomplete="off" /> <span class="add-on dropdown-toggle" data-dropdown="dropdown"> <span class="caret"/> <i class="icon-remove"/> </span> </div> </div>'
       } else {
-        return '<div class="combobox-container"> <input type="hidden" /> <div class="input-group"> <input type="text" autocomplete="false" /> <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret" /> <span class="glyphicon glyphicon-remove" /> </span> </div> </div>'
+        return '<div class="combobox-container"> <input type="hidden" /> <div class="input-group"> <input ' + freeInputAttributes + 'type="text" autocomplete="off" /> <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret" /> <span class="glyphicon glyphicon-remove" /> </span> </div> </div>'
       }
     }
 
@@ -413,7 +421,7 @@
       var that = this;
       this.focused = false;
       var val = this.$element.val();
-      if (!this.selected && val !== '' ) {
+      if (!this.freeInput && !this.selected && val !== '' ) {
         this.$element.val('');
         this.$source.val('').trigger('change');
         this.$target.val('').trigger('change');
diff --git a/js/tests/unit/bootstrap-combobox.js b/js/tests/unit/bootstrap-combobox.js
index f5dcd29..15f41b0 100644
--- a/js/tests/unit/bootstrap-combobox.js
+++ b/js/tests/unit/bootstrap-combobox.js
@@ -320,4 +320,44 @@ $(function () {
 
         combobox.$menu.remove()
       })
+
+      test("should not set as selected if no select was selected before load with free input", function () {
+        var $select = $('<select><option>aa</option><option>ab</option><option>ac</option></select>')
+            , $input = $select.combobox({freeInput: {name:'foo', value:''}}).data('combobox').$element
+            , $target = $select.combobox({freeInput: {name:'foo', value:''}}).data('combobox').$target
+            , combobox = $select.data('combobox')
+
+        equal($input.val(), '', 'input value was correctly set')
+        equal($target.val(), '', 'hidden input value was correctly set')
+        equal($select.val(), 'aa', 'select value was correctly set')
+      })
+
+      test("should not clear input on blur when value does not exist with free input", function() {
+        var $select = $('<select><option>aa</option></select>')
+            , $input = $select.combobox({freeInput: {name:'foo', value:'bar'}}).data('combobox').$element
+            , combobox = $select.data('combobox')
+
+        $input.val('DOES NOT EXIST')
+        $input.trigger('keyup')
+        $input.trigger('blur')
+
+        equal($input.val(), 'DOES NOT EXIST', 'input value was correctly set')
+        equal($select.val(), 'aa', 'select value was correctly set')
+
+        combobox.$menu.remove()
+      })
+
+      test("should give input name attribute with free input", function () {
+        var $select = $('<select><option>aa</option></select>')
+            , $input = $select.combobox({freeInput: {name:'foo', value:'bar'}}).data('combobox').$element
+
+        equal($input.attr('name'), 'foo', 'input name was correctly set')
+      })
+
+      test("should copy value from data attribute to input with free input", function () {
+        var $select = $('<select><option>aa</option></select>')
+            , $input = $select.combobox({freeInput: {name:'foo', value:'bar'}}).data('combobox').$element
+
+        equal($input.val(), 'bar', 'input value was correctly set')
+      })
 })