Browse Source

Added a option to highlight the searched text

Dustin Utecht 5 years ago
parent
commit
383e55ffe8
2 changed files with 6 additions and 0 deletions
  1. 4 0
      src/bootstrap-table.js
  2. 2 0
      src/constants/index.js

+ 4 - 0
src/bootstrap-table.js

@@ -1435,6 +1435,10 @@ class BootstrapTable {
       value = Utils.calculateObjectValue(column,
         this.header.formatters[j], [value_, item, i, field], value_)
 
+      if (this.searchText !== '' && this.options.searchHighlight) {
+        value = Utils.calculateObjectValue(column, column.searchHighlightFormatter, [value, this.searchText], value.replace(new RegExp('(' + this.searchText + ')', 'gim'), '<mark>$1</mark>'))
+      }
+
       if (item[`_${field}_data`] && !Utils.isEmptyObject(item[`_${field}_data`])) {
         for (const [k, v] of Object.entries(item[`_${field}_data`])) {
           // ignore data-index

+ 2 - 0
src/constants/index.js

@@ -232,6 +232,7 @@ const DEFAULTS = {
   paginationPagesBySide: 1, // Number of pages on each side (right, left) of the current page.
   paginationUseIntermediate: false, // Calculate intermediate pages for quick access
   search: false,
+  searchHighlight: false,
   searchOnEnterKey: false,
   strictSearch: false,
   visibleSearch: false,
@@ -490,6 +491,7 @@ const COLUMN_DEFAULTS = {
   footerFormatter: undefined,
   detailFormatter: undefined,
   searchFormatter: true,
+  searchHighlightFormatter: false,
   escape: false,
   events: undefined
 }