2017 年 1 月 19 日星期四

使用 mark.js 進行搜尋反白

如果您在 Google 上搜尋 DataTables 或任何其他關鍵字，您會注意到搜尋關鍵字會在每個結果的描述中反白顯示，如下圖所示。

這種行為讓使用者可以更快地找到他們正在搜尋的內容，從而提高可用性。

DataTables 本身提供搜尋功能，可以過濾表格以僅顯示相關的行。但是它不提供在這些結果中內建的關鍵字反白顯示。如果您也想提高使用者體驗，請繼續閱讀。

Google keyword highlighting

介紹 datatables.mark.js

這就是 datatables.mark.js 的用武之地，它是一個將 mark.js 整合到 DataTables 中的外掛程式。 mark.js 是一個用於字串、陣列或正規表達式的關鍵字反白器，可在任何情況下使用（不僅限於表格）。 datatables.mark.js 連接 mark.js 和 DataTables，為其提供了一個外掛程式，只需一行程式碼即可啟用。

由於 datatables.mark.js 在幕後使用 mark.js，因此您可以運用其所有選項，例如 diacritics 將 ü 對應到 u 等等。

聽起來很有趣？讓我們開始吧。

以下是它將產生的範例

整合 datatables.mark.js

先決條件：一個可以運作的 DataTables 表格！上述範例使用 Bootstrap 樣式的 DataTable，但這不是必需的。

JavaScript

我們需要做的第一件事是將必要的 JavaScript 檔案嵌入到我們的應用程式中。我們需要嵌入 mark.js v6.2+（jQuery 版本）和 datatables.mark.js。當然也必須包含 jQuery 和 DataTables v1.10.6+。

有多種方法可以安裝 mark.js 和 datatables.mark.js，您可以選擇適合您的方式。請注意，您必須將檔案嵌入到您的 HTML 檔案中，例如使用 <script> 或像 RequireJS 的模組載入器。

Bower

$ bower install mark.js --save-dev
$ bower install datatables.mark.js --save-dev

NPM

$ npm install julmot/mark.js --save-dev
$ npm install julmot/datatables.mark.js --save-dev

jsDelivr CDN

DataTables CDN

注意：您可能需要更新您安裝的 DataTable 版本 1.10.13。

CSS

datatables.mark.js 僅在您的表格中建立 <mark> 元素（可以更改為不同的元素，請參閱下文），以指示相符的單字。因此，唯一可能需要一些樣式的是此元素。預設情況下，瀏覽器已經為其提供了一些樣式，但您可以自訂它。為了在所有瀏覽器中保持一致的行為，您可以使用以下檔案之一，例如

CSS

啟用 datatables.mark.js

現在所有檔案都包含在內，我們可以繼續為我們的 DataTable 表格啟用關鍵字反白顯示。若要為單一 DataTable 執行個體執行此操作，我們需要將 mark 選項設定為 true

$(".myTable").DataTable({
    mark: true
});

若要為所有 DataTables 執行個體啟用關鍵字反白顯示，我們需要在 DataTable 預設值中加入 mark 選項

$.extend(true, $.fn.dataTable.defaults, {
    mark: true
});

太棒了！現在，每次您在搜尋輸入中輸入內容時，目前的搜尋關鍵字都會反白顯示

keyword-highlighting-example

注意：datatables.mark.js 也透過 DataTables API 支援全域或欄位特定的搜尋，例如 table.column(0).search("Lond").draw()（欄位特定搜尋）或 table.search("Lon").draw()（全域搜尋）。

加入自訂 mark.js 選項

如前所述，datatables.mark.js 在幕後使用 mark.js。若要自訂它，您可以使用其選項。例如，如果您想用 <span class="highlight"></span> 元素而不是 <mark>（預設值）來包裝相符項，您可以使用以下內容

$('.myTable').DataTable({
    mark: {
        element: 'span',
        className: 'highlight'
    }
});

這當然也適用於透過 DataTables 預設值啟用（請參閱上文）。

另一個範例是 diacritics 選項。 DataTables 提供外掛程式，可在搜尋時消除重音符號。為了也在關鍵字反白顯示過程中消除重音符號，mark.js 提供了一個 diacritics 選項，預設為啟用。若要停用它，您可以使用例如

$('.myTable').DataTable({
    mark: {
        diacritics: false
    }
});

如需完整的選項清單，請造訪 mark.js。

結論

本文讓您深入了解如何使用 mark.js 在 DataTables 中加入搜尋關鍵字反白顯示。 datatables.mark.js 和 mark.js 是跨瀏覽器、單元測試、以 ES6 編寫、維護且開放接受功能請求。