突出显示搜索文本引导表

Posted 2023-03-06

【中文标题】突出显示搜索文本引导表

【英文标题】：Highlight search text bootstrap table

【发布时间】：2016-07-31 15:07:18

【问题描述】：

我正在尝试实现 jquery plugin 以在我的应用中突出显示搜索文本，我正在使用 this topic，我已将 jquery 插件添加到我的应用中并添加以下行：

  $table.highlight($(".search.bs.table").val());

但搜索文本仍然没有突出显示。谁能给我解释一下，我的错误在哪里？

plunker

代码：

function initTable() 
    $table.bootstrapTable(
        filterControl: true,
        //data: url,
        //url: 'data/events.json',
        height: getHeight(),
        formatNoMatches: function () 
            return "Please, choose your category";
        

    );

    // sometimes footer render error.
    setTimeout(function () 
        $table.bootstrapTable('resetView');
    , 200);
    $table.on('check.bs.table uncheck.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table', function () 
        $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
        // save your data, here just save the current page
        selections = getIdSelections();
        // push or splice the selections if you want to save all data selections
    );
    $table.on('all.bs.table', function (e, name, args) 
        console.log(name, args);
    );
    $table.highlight($(".search.bs.table").val());

    $table.on('search.bs.table', function (e, text)

        "use strict";
        console.log(e);
        console.log(text);
    );
    $remove.click(function () 
        var ids = getIdSelections();
        $table.bootstrapTable('remove', 
            field: 'id',
            values: ids
        );
        $remove.prop('disabled', true);
    );
    $(window).resize(function () 
        $table.bootstrapTable('resetView', 
            //height: getHeight()
        );
    );

【参考方案1】：

我知道它是如何工作的 右侧代码下方（将此代码放在inittable中）：

$table.highlight($(".search.bs.table").val());

$table.on('search.bs.table', function (e, text)

    $table.highlight(text);
    console.log(e);
    console.log(text);
);

css：

.highlight background-color: yellow

【讨论】：

我注意到你之前问过一个问题，如果有人想要参考，你可以点击这个link-bootstrap-table-issue-2172。

【参考方案2】：

对于 >= 1.18.x 版本，您可以使用 data-search-highlight

<table data-search-highlight="true"></table>

example code