Feature/4781 (#4828)

* added an option to show an search input within the columns filter dropdown

* added an fake class so we can always finde the correct element to hide

* fixed wrong selector

* fixed typo...

* set the autocomplete attribute to off

Co-authored-by: Dennis Hernández <dennishernandezvargas@gmail.com>

site/docs/api/table-options.md

@@ -1102,6 +1102,20 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Columns Toggle All](https://examples.bootstrap-table.com/#options/columns-toggle-all.html)
 
+## showColumnsSearch
+
+- **Attribute:** `data-show-columns-search`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set `true` to show a search for the columns filter.
+
+- **Default:** `false`
+
+- **Example:** [Columns Search](https://examples.bootstrap-table.com/#options/columns-search.html)
+
 ## minimumCountColumns
 
 - **Attribute:** `data-minimum-count-columns`

src/bootstrap-table.js

@@ -542,12 +542,21 @@ class BootstrapTable {
         html.push(`<div class="keep-open ${this.constants.classes.buttonsDropdown}" title="${opts.formatColumns()}">
           <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" data-toggle="dropdown"
           aria-label="Columns" title="${opts.formatColumns()}">
-          ${opts.showButtonIcons ? Utils.sprintf(this.constants.html.icon, opts.iconsPrefix, opts.icons.columns) : '' }
+          ${opts.showButtonIcons ? Utils.sprintf(this.constants.html.icon, opts.iconsPrefix, opts.icons.columns) : ''}
           ${opts.showButtonText ? opts.formatColumns() : ''}
           ${this.constants.html.dropdownCaret}
           </button>
           ${this.constants.html.toolbarDropdown[0]}`)
 
+        if (opts.showColumnsSearch) {
+          html.push(
+            Utils.sprintf(this.constants.html.toolbarDropdownItem,
+              Utils.sprintf('<input type="text" class="%s" id="columnsSearch" placeholder="%s" autocomplete="off">', this.constants.classes.input, opts.formatSearch())
+            )
+          )
+          html.push(this.constants.html.toolbarDropdownSeparator)
+        }
+
         if (opts.showColumnsToggleAll) {
           const allFieldsVisible = this.getVisibleColumns().length === this.columns.filter(column => !this.isSelectionColumn(column)).length
           html.push(
@@ -624,8 +633,8 @@ class BootstrapTable {
 
     if (opts.showColumns) {
       $keepOpen = this.$toolbar.find('.keep-open')
-      const $checkboxes = $keepOpen.find('input:not(".toggle-all")')
-      const $toggleAll = $keepOpen.find('input.toggle-all')
+      const $checkboxes = $keepOpen.find('input[type="checkbox"]:not(".toggle-all")')
+      const $toggleAll = $keepOpen.find('input[type="checkbox"].toggle-all')
 
       if (switchableCount <= opts.minimumCountColumns) {
         $keepOpen.find('input').prop('disabled', true)
@@ -646,6 +655,24 @@ class BootstrapTable {
       $toggleAll.off('click').on('click', ({currentTarget}) => {
         this._toggleAllColumns($(currentTarget).prop('checked'))
       })
+
+      if (opts.showColumnsSearch) {
+        const $columnsSearch = $keepOpen.find('#columnsSearch')
+        const $listItems = $keepOpen.find('.dropdown-item-marker')
+        $columnsSearch.on('keyup paste change', ({currentTarget}) => {
+          const $this = $(currentTarget)
+          const searchValue = $this.val().toLowerCase()
+          $listItems.show()
+          $checkboxes.each((i, el) => {
+            const $checkbox = $(el)
+            const $listItem = $checkbox.parents('.dropdown-item-marker')
+            const text = $listItem.text().toLowerCase()
+            if (!text.includes(searchValue)) {
+              $listItem.hide()
+            }
+          })
+        })
+      }
     }
 
     // Fix #4516: this.showSearchClearButton is for extensions
@@ -665,7 +692,7 @@ class BootstrapTable {
       )
       const searchInputHtml = `<input class="${this.constants.classes.input}
         ${Utils.sprintf(' %s%s', this.constants.classes.inputPrefix, opts.iconSize)}
-        search-input" type="text" placeholder="${opts.formatSearch()}">`
+        search-input" type="text" placeholder="${opts.formatSearch()}" autocomplete="off">`
       let searchInputFinalHtml = searchInputHtml
 
       if (opts.showSearchButton || opts.showSearchClearButton) {
@@ -2399,7 +2426,7 @@ class BootstrapTable {
     this.initPagination()
     this.initBody()
     if (this.options.showColumns) {
-      const $items = this.$toolbar.find('.keep-open input:not(".toggle-all")').prop('disabled', false)
+      const $items = this.$toolbar.find('.keep-open input[type="checkbox"]:not(".toggle-all")').prop('disabled', false)
 
       if (visible) {
         $items.prop('checked', visible)

src/constants/index.js

@@ -46,7 +46,7 @@ const CONSTANTS = {
     },
     html: {
       toolbarDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
-      toolbarDropdownItem: '<li role="menuitem"><label>%s</label></li>',
+      toolbarDropdownItem: '<li class="dropdown-item-marker" role="menuitem"><label>%s</label></li>',
       toolbarDropdownSeparator: '<li class="divider"></li>',
       pageDropdown: ['<ul class="dropdown-menu" role="menu">', '</ul>'],
       pageDropdownItem: '<li role="menuitem" class="%s"><a href="#">%s</a></li>',
@@ -92,7 +92,7 @@ const CONSTANTS = {
     },
     html: {
       toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
-      toolbarDropdownItem: '<label class="dropdown-item">%s</label>',
+      toolbarDropdownItem: '<label class="dropdown-item dropdown-item-marker">%s</label>',
       pageDropdown: ['<div class="dropdown-menu">', '</div>'],
       pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>',
       toolbarDropdownSeparator: '<div class="dropdown-divider"></div>',
@@ -193,6 +193,7 @@ const DEFAULTS = {
   },
   showColumns: false,
   showColumnsToggleAll: false,
+  showColumnsSearch: false,
   minimumCountColumns: 1,
   showPaginationSwitch: false,
   showRefresh: false,

src/themes/bulma/bootstrap-table-bulma.js

@@ -26,7 +26,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.buttonActive = 'is-active'
 
     this.constants.html.toolbarDropdown = ['<div class="dropdown-menu"><div class="dropdown-content">', '</div></div>']
-    this.constants.html.toolbarDropdownItem = '<label class="dropdown-item">%s</label>'
+    this.constants.html.toolbarDropdownItem = '<label class="dropdown-item dropdown-item-marker">%s</label>'
     this.constants.html.toolbarDropdownSeparator = '<li class="dropdown-divider"></li>'
     this.constants.html.pageDropdown = ['<div class="dropdown-menu"><div class="dropdown-content">', '</div></div>']
     this.constants.html.pageDropdownItem = '<a class="dropdown-item %s" href="#">%s</a>'

src/themes/foundation/bootstrap-table-foundation.js

@@ -24,7 +24,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.buttonActive = 'success'
 
     this.constants.html.toolbarDropdown = ['<div class="dropdown-pane" id="toolbar-columns-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
-    this.constants.html.toolbarDropdownItem = '<li><label class="dropdown-item">%s</label></li>'
+    this.constants.html.toolbarDropdownItem = '<li class="dropdown-item-marker"><label class="dropdown-item">%s</label></li>'
     this.constants.html.toolbarDropdownSeparator = '<li><hr></li>'
     this.constants.html.pageDropdown = ['<div class="dropdown-pane" id="pagination-list-id" data-dropdown><ul class="vertical menu">', '</ul></div>']
     this.constants.html.pageDropdownItem = '<li class="dropdown-item %s"><a href="#">%s</a></li>'

src/themes/materialize/bootstrap-table-materialize.js

@@ -39,7 +39,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.buttonActive = 'green'
 
     this.constants.html.toolbarDropdown = ['<ul id="toolbar-columns-id" class="dropdown-content">', '</ul>']
-    this.constants.html.toolbarDropdownItem = '<li><label>%s</label></li>'
+    this.constants.html.toolbarDropdownItem = '<li class="dropdown-item-marker"><label>%s</label></li>'
     this.constants.html.toolbarDropdownSeparator = '<li class="divider" tabindex="-1"></li>'
     this.constants.html.pageDropdown = ['<ul id="pagination-list-id" class="dropdown-content">', '</ul>']
     this.constants.html.pageDropdownItem = '<li><a class="%s" href="#">%s</a></li>'

src/themes/semantic/bootstrap-table-semantic.js

@@ -22,7 +22,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.classes.paginationDropdown = 'ui dropdown'
 
     this.constants.html.toolbarDropdown = ['<div class="menu">', '</div>']
-    this.constants.html.toolbarDropdownItem = '<label class="item">%s</label>'
+    this.constants.html.toolbarDropdownItem = '<label class="item dropdown-item-marker">%s</label>'
     this.constants.html.toolbarDropdownSeparator = '<div class="divider"></div>'
     this.constants.html.pageDropdown = ['<div class="menu">', '</div>']
     this.constants.html.pageDropdownItem = '<a class="item %s" href="#">%s</a>'