danielfarrell / bootstrap-combobox

A combobox plugin that works with twitter bootstrap
849 stars 328 forks source link

Bootstrap 5 Floating Label - additional feature #281

Open tnegroup opened 1 year ago

tnegroup commented 1 year ago

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:

image

  , 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>';
      }
    }