add a multisearch/filter with example. fixes #399

Author: johanneswilm

docs/demos/30-custom-search-method/index.html

@@ -0,0 +1,99 @@
+import {DataTable} from "../dist/module.js"
+const datatable = new DataTable("#demo-table", {
+    perPageSelect: [5, 10, 15, ["All", -1]],
+    columns: [
+        {
+            select: 1,
+            sortable: false,
+            searchMethod: (terms, cell, row, _column, source) => {
+                let found
+                if (source === "class-filter") {
+                    found = terms.find(
+                        // For each of the terms, check if at least one of the class tags in the cell exactly matches the term
+                        term => cell.data.find(span => span.attributes?.class === `class ${term}`)
+                    )
+                } else {
+                    // This is normal search. We just check if one of the terms is part of the text of the cell
+                    found = terms.find(
+                        term => cell.text.toLowerCase().includes(term.toLowerCase().trim())
+                    )
+                }
+                if (found) return true
+                return false
+            }
+        },
+        {
+            select: 4,
+            searchMethod: (terms, cell, row, _column, source) => {
+                if (source === "completion-filter") {
+                    const cellPercentage = parseInt(cell.data, 10)
+                    const minPercentage = parseInt(terms[0], 10)
+                    if (cellPercentage >= minPercentage) return true
+                    return false
+                }
+                // This is normal search. We just check if one of the terms is part of the text of the cell
+                const found = terms.find(
+                    term => cell.data.includes(term.toLowerCase().trim())
+                )
+
+                if (found) return true
+                return false
+            }
+        }
+    ]
+})
+
+
+// Multi-select dropdown
+let isDropdownOpen = false
+
+const toggleDropdown = () => {
+    const checkboxes = document.getElementById("checkboxes")
+    if (isDropdownOpen) {
+        checkboxes.style.display = "none"
+        isDropdownOpen = false
+    } else {
+        checkboxes.style.display = "block"
+        isDropdownOpen = true
+    }
+}
+
+document.querySelector(".select-box").addEventListener("click", toggleDropdown)
+// Close the dropdown if the user clicks outside of it
+window.onclick = function(event) {
+    if (!event.target.matches(".select-box") && !event.target.matches(".over-select") && !event.target.closest("#checkboxes")) {
+        const checkboxes = document.getElementById("checkboxes")
+        checkboxes.style.display = "none"
+        isDropdownOpen = false
+    }
+    if (event.target.closest("#checkboxes label")) {
+        // Change in checked classes, restart search
+        // Get all checked checkboxes
+        const checked = Array.from(document.querySelectorAll("#checkboxes input:checked")).map(checkbox => checkbox.value)
+        if (!checked.length) {
+            // Don't allow deselecting the last checkbox.
+            event.target.closest("#checkboxes label").querySelector("input").checked = true
+            return
+        }
+        datatable.multiSearch([
+            {terms: checked,
+                columns: [1]}
+        ], "class-filter")
+    }
+
+}
+
+const updateSliderValue = value => {
+    document.getElementById("slider-value").innerHTML = `${value}%`
+    datatable.multiSearch([
+        {terms: [value],
+            columns: [4]}
+    ], "completion-filter")
+}
+
+document.querySelector("#percentage-slider").addEventListener("input", function() {
+    updateSliderValue(this.value)
+})
+
+
+window.dt = datatable

docs/demos/30-custom-search-method/script.js

@@ -0,0 +1,107 @@
+span.class {
+    display: inline-block;
+    padding: 5px 10px;
+    margin: 3px;
+    border-radius: 12px;
+    font-size: 14px;
+    font-weight: 500;
+    color: white;
+}
+
+/* Pastel colors for different subjects */
+.math {
+    background-color: #a3d8f4; /* pastel blue */
+    color: #1d4e89;
+}
+
+.history {
+    background-color: #f9c6c9; /* pastel pink */
+    color: #87373f;
+}
+
+.english {
+    background-color: #c6e1bc; /* pastel green */
+    color: #2b5d2e;
+}
+
+.physics {
+    background-color: #f6d8ac; /* pastel yellow */
+    color: #8a5e11;
+}
+
+.chemistry {
+    background-color: #f3bbd3; /* pastel magenta */
+    color: #73234a;
+}
+
+.biology {
+    background-color: #b7e0e5; /* pastel teal */
+    color: #1b5b5e;
+}
+
+.french {
+    background-color: #ecd9f2; /* pastel purple */
+    color: #562e6d;
+}
+
+.german {
+    background-color: #f2d3a1; /* pastel orange */
+    color: #9b6c22;
+}
+
+/* Style for the dropdown and the checkboxes */
+.multiselect {
+    position: relative;
+    width: 200px;
+}
+
+.select-box {
+    position: relative;
+    display: block;
+    border: 1px solid #aaa;
+    padding: 8px;
+    background-color: #fff;
+    cursor: pointer;
+}
+
+.select-box select {
+    width: 100%;
+    border: none;
+    outline: none;
+    background: none;
+    font-size: 16px;
+}
+
+.over-select {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    cursor: pointer;
+}
+
+.checkboxes {
+    display: none;
+    border: 1px solid #aaa;
+    padding: 10px;
+    background-color: #f9f9f9;
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+}
+
+.checkboxes label {
+    display: block;
+    margin-bottom: 5px;
+    cursor: pointer;
+}
+
+.checkboxes input[type="checkbox"] {
+    margin-right: 10px;
+}
+
+/* Additional styling */
+.select-box:hover {
+    background-color: #e9e9e9;
+}

docs/demos/30-custom-search-method/style.css

@@ -46,6 +46,7 @@ <h2>Demos</h2>
             <a href="27-load-json/">Load JSON</a>
             <a href="28-sort-order-attribute/">Sort order attribute</a>
             <a href="29-responsive-layout/">Responsive layout</a>
+            <a href="30-custom-search-method/">Custom search method</a>
         </nav>
     </body>
 </html>

docs/demos/index.html

@@ -48,6 +48,7 @@ let dataTable = new DataTable(myTable, options);
 * [searchable](searchable)
 * [sensitivity](columns#sensitivity)
 * [searchQuerySeparator](searchQuerySeparator)
+* [searchMethod](searchMethod)
 ### Sorting
 * [sortable](sortable)
 * [locale](columns#locale)

docs/documentation/Options.md

@@ -51,6 +51,21 @@ When set to `false` the column(s) cannot be searched.
 
 Default: `""`. Influences searching in that cell content will be split with this value by default when searching for content. Specifying `searchItemSeparator` as part of the table's configuration will define a default for all search boxes.
 
+#### `searchMethod`
+
+A custom search method to be used for the column(s). The function should take 5 arguments:
+`terms` (an array of strings representing the search terms),
+`cell` (the cell that is to be checked for the search terms),
+`row` (the data row that the cell is part of),
+`column` (the id of the column of the cell),
+`source` (a unique string given to a particular search interface so that multiple search itnerfaces can be used simultaneously).
+
+It should return `true` if the search string is found in the data, `false` otherwise.
+
+The default is that it simply checks for the presence of a particular search term in the cell content.
+
+Defining a `searchMethod` as part of the table's configuration will define a default for all columns.
+
 #### `select`
 
 An integer or array of integers representing the column(s) to be manipulated.
@@ -100,7 +115,7 @@ You can either return a string representing the cells content, you can modify th
  =>
 render: function(value, td, rowIndex, cellIndex) {
 
-}		
+}
 
 ```
 

docs/documentation/columns.md

@@ -7,6 +7,7 @@ Filter the table based on multiple queries.
 ```javascript
 /**
  * @param  { { terms: String[], columns=: Number[] }[] } queries Queries including search term and columns (optional)
+ * @param  {str} source Source of the search. (optional, used to invalidate search rows later on)
  * @return {void}
  */
 datatable.multiSearch(queries);

docs/documentation/multiSearch().md

@@ -8,6 +8,7 @@ Filter the table based on a single query.
 /**
  * @param  {str} term Search term
  * @param  {int[]} columns Columns to be searched (optional)
+ * @param  {str} source Source of the search. (optional, used to invalidate search rows later on)
  * @return {void}
  */
 datatable.search(term, columns);

docs/documentation/search().md

@@ -0,0 +1,17 @@
+### `searchMethod`
+#### Type: `function`
+#### Default: `undefined`
+
+A custom search method to be used for the column(s). The function should take 5 arguments:
+`terms` (an array of strings representing the search terms),
+`cell` (the cell that is to be checked for the search terms),
+`row` (the data row that the cell is part of),
+`column` (the id of the column of the cell),
+`source` (a unique string given to a particular search interface so that multiple search itnerfaces can be used simultaneously).
+
+It should return `true` if the search string is found in the data, `false` otherwise.
+
+The default is that it simply checks for the presence of a particular search term in the cell content.
+
+A `searchMethod` can also be defined for individual columns. If a `searchMethod` is defined for a column, it will override the
+default `searchMethod` defined for the table.

docs/documentation/searchMethod.md

@@ -79,6 +79,10 @@ export const readColumnSettings = (columnOptions = [], defaultType, defaultForma
                 }
             }
 
+            if (data.searchMethod) {
+                column.searchMethod = data.searchMethod
+            }
+
             if (data.hidden) {
                 column.hidden = true
             }