feature/5290 (#5292)

* Added a new option to define a custom search selector

* text typos fixed

* Fix typo

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

site/docs/api/table-options.md

@@ -1071,6 +1071,8 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
   - Comparisons (<, >, <=, =<, >=, =>).
     Example: 4 is larger than 3.
 
+  Note: If you want to use a custom search input use the [searchSelector](https://bootstrap-table.com/docs/api/table-options/#searchSelector).
+
 - **Default:** `false`
 
 - **Example:** [Table Search](https://examples.bootstrap-table.com/#options/table-search.html)
@@ -1132,6 +1134,20 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Search On Enter Key](https://examples.bootstrap-table.com/#options/search-on-enter-key.html)
 
+## searchSelector
+
+- **Attribute:** `data-search-selector`
+
+- **Type:** `Boolean|String`
+
+- **Detail:**
+
+  If this option is set (must be a valid dom selector e.g. `#customSearch`), the found dom element (should be an `input` element) will be used as table search instead of the built-in search input.
+
+- **Default:** `false`
+
+- **Example:** [Search Selector](https://examples.bootstrap-table.com/#options/table-search-selector.html)
+
 ## searchText
 
 - **Attribute:** `data-search-text`

src/bootstrap-table.js

@@ -724,9 +724,28 @@ class BootstrapTable {
         })
       }
     }
+    const handleInputEvent = ($searchInput) => {
+      const eventTriggers = 'keyup drop blur mouseup'
+      $searchInput.off(eventTriggers).on(eventTriggers, event => {
+        if (opts.searchOnEnterKey && event.keyCode !== 13) {
+          return
+        }
+
+        if ([37, 38, 39, 40].includes(event.keyCode)) {
+          return
+        }
 
+        clearTimeout(timeoutId) // doesn't matter if it's 0
+        timeoutId = setTimeout(() => {
+          this.onSearch({currentTarget: event.currentTarget})
+        }, opts.searchTimeOut)
+      })
+    }
     // Fix #4516: this.showSearchClearButton is for extensions
-    if (opts.search || this.showSearchClearButton) {
+    if (
+      (opts.search || this.showSearchClearButton)
+      && typeof this.options.searchSelector !== 'string'
+    ) {
       html = []
       const showSearchButton = Utils.sprintf(this.constants.html.searchButton,
         this.constants.buttonsClass,
@@ -760,25 +779,7 @@ class BootstrapTable {
       `, searchInputFinalHtml))
 
       this.$toolbar.append(html.join(''))
-      const $searchInput = this.$toolbar.find('.search input')
-      const handleInputEvent = () => {
-        const eventTriggers = 'keyup drop blur mouseup'
-        $searchInput.off(eventTriggers).on(eventTriggers, event => {
-          if (opts.searchOnEnterKey && event.keyCode !== 13) {
-            return
-          }
-
-          if ([37, 38, 39, 40].includes(event.keyCode)) {
-            return
-          }
-
-          clearTimeout(timeoutId) // doesn't matter if it's 0
-          timeoutId = setTimeout(() => {
-            this.onSearch({currentTarget: event.currentTarget})
-          }, opts.searchTimeOut)
-        })
-      }
-
+      const $searchInput = Utils.getSearchInput(this)
       if (opts.showSearchButton) {
         this.$toolbar.find('.search button[name=search]').off('click').on('click', event => {
           clearTimeout(timeoutId) // doesn't matter if it's 0
@@ -788,10 +789,10 @@ class BootstrapTable {
         })
 
         if (opts.searchOnEnterKey) {
-          handleInputEvent()
+          handleInputEvent($searchInput)
         }
       } else {
-        handleInputEvent()
+        handleInputEvent($searchInput)
       }
 
       if (opts.showSearchClearButton) {
@@ -799,6 +800,9 @@ class BootstrapTable {
           this.resetSearch()
         })
       }
+    } else if (typeof this.options.searchSelector === 'string') {
+      const $searchInput = Utils.getSearchInput(this)
+      handleInputEvent($searchInput)
     }
   }
 
@@ -814,7 +818,7 @@ class BootstrapTable {
         return
       }
 
-      if ($(currentTarget).hasClass('search-input')) {
+      if (currentTarget === Utils.getSearchInput(this)[0] || $(currentTarget).hasClass('search-input')) {
         this.searchText = text
         this.options.searchText = text
       }
@@ -1838,7 +1842,7 @@ class BootstrapTable {
     if (this.options.search) {
       this.searchText = ''
       if (this.options.searchText !== '') {
-        const $search = this.$toolbar.find('.search input')
+        const $search = Utils.getSearchInput(this)
         $search.val(this.options.searchText)
         this.onSearch({currentTarget: $search, firedByInitSearchText: true})
       }
@@ -2891,7 +2895,7 @@ class BootstrapTable {
   }
 
   resetSearch (text) {
-    const $search = this.$toolbar.find('.search input')
+    const $search = Utils.getSearchInput(this)
     $search.val(text || '')
     this.onSearch({currentTarget: $search})
   }

src/constants/index.js

@@ -235,6 +235,7 @@ const DEFAULTS = {
   searchHighlight: false,
   searchOnEnterKey: false,
   strictSearch: false,
+  searchSelector: false,
   visibleSearch: false,
   showButtonIcons: true,
   showButtonText: false,

src/extensions/filter-control/bootstrap-table-filter-control.js

@@ -366,7 +366,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
       const cookies = UtilsFilterControl.collectBootstrapCookies()
       const table = this.$el.closest('table')
       const controls = UtilsFilterControl.getSearchControls(that)
-      const search = that.$toolbar.find('.search input')
+      const search = Utils.getSearchInput(this)
       let hasValues = false
       let timeoutId = 0
 

src/extensions/key-events/bootstrap-table-key-events.js

@@ -4,6 +4,8 @@
  * @update zhixin wen <wenzhixin2010@gmail.com>
  */
 
+const Utils = $.fn.bootstrapTable.utils
+
 $.extend($.fn.bootstrapTable.defaults, {
   keyEvents: false
 })
@@ -20,7 +22,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
   initKeyEvents () {
     $(document).off('keydown').on('keydown', e => {
-      const $search = this.$toolbar.find('.search input')
+      const $search = Utils.getSearchInput(this)
       const $refresh = this.$toolbar.find('button[name="refresh"]')
       const $toggle = this.$toolbar.find('button[name="toggle"]')
       const $paginationSwitch = this.$toolbar.find('button[name="paginationSwitch"]')

src/utils/index.js

@@ -1,4 +1,12 @@
 export default {
+
+  getSearchInput (that) {
+    if (typeof that.options.searchSelector === 'string') {
+      return $(that.options.searchSelector)
+    }
+    return that.$toolbar.find('.search input')
+  },
+
   // it only does '%s', and return '' when arguments are undefined
   sprintf (_str, ...args) {
     let flag = true