Merge pull request #263 from y-code/bootstrap4-support

support Bootstrap 4
danielfarrell · Mar 27, 2019 · dc40ea3 · dc40ea3
2 parents 0d9f2c1 + 6e14f92
commit dc40ea3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -75,6 +75,10 @@ When activating the plugin, you may include an object containing options for the
  `renderLimit`: The maximum number of suggestions to render on the screen at one time. Useful for dealing with source elements with items.
 
  `clearIfNoMatch`: When true, the combobox will clear its contents when unfocusing if a matching option is not selected. Defaults to true.
+
+ `iconCaret`: Custom icon font class for the caret button of the combobox. This is only effective when using {bsVersion: '4'}. (e.g. 'fas fa-caret-down' when using Font Awesome)
+
+ `iconRemove`: Custom icon font class for the remove button of the combobox. This is only effective when using {bsVersion: '4'}. (e.g. 'fas fa-times' when using Font Awesome)
 
 
 

diff --git a/css/bootstrap-combobox.css b/css/bootstrap-combobox.css
@@ -10,11 +10,23 @@
     width: auto;
   }
 }
-.combobox-selected .caret {
+.combobox-container .dropdown-toggle {
+  justify-content: center;
+}
+.combobox-container .dropdown-toggle.custom-icon::after {
+  content: none;
+}
+.combobox-container.combobox-selected .dropdown-toggle::after {
+  content: none;
+}
+.combobox-container .utf-remove::after {
+  content: "\00D7";
+}
+.combobox-container.combobox-selected .pulldown {
   display: none;
 }
 /* :not doesn't work in IE8 */
-.combobox-container:not(.combobox-selected) .glyphicon-remove {
+.combobox-container:not(.combobox-selected) .remove {
   display: none;
 }
 .typeahead-long {

diff --git a/js/bootstrap-combobox.js b/js/bootstrap-combobox.js
@@ -23,6 +23,8 @@
  /* COMBOBOX PUBLIC CLASS DEFINITION
   * ================================ */
 
+  var hasPopper = typeof Popper !== 'undefined';
+
   var Combobox = function ( element, options ) {
     this.options = $.extend({}, $.fn.combobox.defaults, options);
     this.template = this.options.template || this.template
@@ -180,9 +182,17 @@
 
   , 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"/> <i class="icon-remove"/> </span> </div> </div>'
+        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"> <input 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>'
+        return '<div class="combobox-container"> <input type="hidden" /> <div class="input-group"> <input type="text" autocomplete="off" />'
+          + '<span class="input-group-append"' + (hasPopper ? ' data-toggle="dropdown" data-reference="parent"' : '') + '>'
+            + '<span class="input-group-text dropdown-toggle' + (this.options.iconCaret ? ' custom-icon' : '') + '">'
+              + (this.options.iconCaret ? '<span class="' + this.options.iconCaret + ' pulldown" />' : '')
+              + (this.options.iconRemove ? '<span class="' + this.options.iconRemove + ' remove" />' : '<span class="utf-remove remove" />')
+            + '</span>'
+          + '</span> </div> </div>';
       }
     }
 
@@ -460,6 +470,8 @@
     bsVersion: '4'
   , menu: '<ul class="typeahead typeahead-long dropdown-menu"></ul>'
   , item: '<li><a href="#" class="dropdown-item"></a></li>'
+  , iconCaret: undefined
+  , iconRemove: undefined
   , clearIfNoMatch: true
   };