dynamic multiple input size

value not being removed on multiple values setup

Author: sergiodlopes

jquery.flexdatalist.css

@@ -1,3 +1,13 @@
+/**
+ * jQuery Flexdatalist basic stylesheet.
+ *
+ * Version:
+ * 2.2.1
+ *
+ * Github:
+ * https://github.com/sergiodlopes/jquery-flexdatalist/
+ *
+ */
 .flexdatalist-results {
     position: absolute;
     top: 0;
@@ -86,7 +96,7 @@
 .flexdatalist-multiple li.input-container,
 .flexdatalist-multiple li.input-container input {
     border: none;
-    width: 280px;
+    width: 40px;
     height: auto;
     padding: 0 0 0 4px;
     line-height: 24px;

jquery.flexdatalist.js

@@ -3,7 +3,7 @@
  * Autocomplete input fields, with support for datalists.
  *
  * Version:
- * 2.2.0.1
+ * 2.2.1
  *
  * Depends:
  * jquery.js > 1.8.3
@@ -172,6 +172,7 @@ jQuery.fn.flexdatalist = function (_option, _value) {
                 _this.action.showAllResults(event);
                 _this.action.clearValue(event);
                 _this.action.removeResults(event);
+                _this.action.inputWidth(event);
             })
             // Focusout
             .on('focusout', function (event) {
@@ -299,6 +300,23 @@ jQuery.fn.flexdatalist = function (_option, _value) {
                     });
                 }
             },
+        /**
+         * Calculate input width by number of characters.
+         */
+            inputWidth: function (event) {
+                var options = _this.options.get();
+                if (options.multiple) {
+                    var keyword = $alias.val(),                    
+                        fontSize = parseInt($alias.css('fontSize').replace('px', '')),
+                        minWidth = 40,
+                        maxWidth = $this.innerWidth(),
+                        width = ((keyword.length + 1) * fontSize);
+
+                    if (width >= minWidth && width <= maxWidth) {
+                        $alias[0].style.width = width + 'px';
+                    }
+                }
+            },
         /**
          * Clear text/alias input when criteria is met.
          */
@@ -624,7 +642,7 @@ jQuery.fn.flexdatalist = function (_option, _value) {
                         _multiple.toggle($(this));
                     // Remove
                     }).find('.fdl-remove').click(function () {
-                        _multiple.remove($(this).parent());
+                        _this.fvalue.remove($(this).parent());
                     });
 
                     this.push(val);