Skip to content

Commit

Permalink
dynamic multiple input size
Browse files Browse the repository at this point in the history
value not being removed on multiple values setup
  • Loading branch information
sergiodlopes committed Sep 8, 2017
1 parent 21cdbaa commit a54d1be
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 6 deletions.
12 changes: 11 additions & 1 deletion jquery.flexdatalist.css
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand Down
22 changes: 20 additions & 2 deletions jquery.flexdatalist.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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);
Expand Down
3 changes: 2 additions & 1 deletion jquery.flexdatalist.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit a54d1be

Please sign in to comment.