2017 年 1 月 19 日星期四

使用 mark.js 进行搜索高亮

如果你谷搜索 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 实例激活关键字高亮显示，我们需要将 mark 选项添加到 DataTable 默认值

$.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 编写的，维护良好，并可接受功能请求的。