bootstrap-combobox
bootstrap-combobox copied to clipboard
Bootstrap 5 Floating Label - additional feature
trafficstars
If anybody is interested, I modified the constructor template so that it allows for a floatingLabel option string to be added and it will behave the same way as floating labels in Bootstrap 5:
, template: function() {
if (this.options.bsVersion == '2') {
return '<div class="combobox-container"><input type="hidden" /> <div class="input-append"> <input type="text" autocomplete="off" /> <span class="add-on dropdown-toggle" data-dropdown="dropdown"> <span class="caret pulldown" style="vertical-align: middle"/> <i class="icon-remove remove"/> </span> </div> </div>'
} else if (this.options.bsVersion == '3') {
return '<div class="combobox-container"> <input type="hidden" /> <div class="input-group"> <input type="text" autocomplete="off" /> <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown"> <span class="caret pulldown" /> <span class="glyphicon glyphicon-remove remove" /> </span> </div> </div>'
} else {
return '<div class="combobox-container"> <input type="hidden" /> <div class="input-group"> ' + (this.options.floatingLabel ? '<div class="form-floating">' : '') + '<input type="text" autocomplete="off" />'
+ (this.options.floatingLabel ? '<label for="' + this.$source.attr('id') + '" class="form-label">' + this.options.floatingLabel + '</label></div>' : '')
+ '<div class="input-group-text dropdown-toggle' + (this.options.iconCaret ? ' custom-icon' : '') + '" '+ (hasPopper ? ' data - toggle="dropdown" data - reference="parent"' : '') + ' > '
+ (this.options.iconCaret ? '<span class="' + this.options.iconCaret + ' pulldown" />' : '')
+ (this.options.iconRemove ? '<span class="' + this.options.iconRemove + ' remove" />' : '<span class="utf-remove remove" />')
+ '</div> </div> </div>';
}
}