highlight doesn't work for custom filter

[chino23]

When I apply a filter using

tree.filterNodes(function(node){
        if (node.title.indexOf(searchText) === "test"){
               return true;
        }
}, { autoExpand: true })

it works but it's not highlighted anymore. Even if I use the highlight: true option.

When I use

return new RegExp(match, "i").test(node.title);

it doesn't highlight either.

But with the normal passing of just the string without a function

 var test = tree.filterNodes(searchText, { autoExpand: true });

it works. But I need a function to supply a more complex statement.

[mar10]

Automatic highlighting only works for string arguments, because fancytree cannot figure out what part caused a match in custom callbacks.
But you can set 'node.titleWithHighlight' inside your callback to a string that contains <mark> tags, for example.

[chino23]

Thank you Martin, I got it to work.

[dparreno]

Hi! I currently have the same issue. Can you give me a sample on how you managed to get it to work? Thanks!

[chino23]

Sure.

See below, there are two different ways to check and mark it.
One uses the titleWithHighlight attribute on the node, as it's just on the title.
The second one is a field in an array, custom_array, and it's checked there as well.
Also one time it's done with regex, the other time it's done with indexOf
So I can have one search to search in both the title and the array.

var replacement = '<mark>$&</mark>';

searchText = searchText.replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");

var rex = new RegExp(searchText, 'ig')

var searchElement;

var isMatch = false;

tree.filterNodes(function (node) {
    node.titleWithHighlight = node.title.replace(rex, replacement);

        if (rex.test(node.title) === true) {

         isMatch = true;

        }

    for (var i = 0; i < node.data.custom_array.length; i++) {

        if (node.data.custom_array[i].indexOf(searchText) !== -1) {

            searchElement = $("#" + node.data.custom_id + "_task").find(".tag" + i);

            searchElement.html(node.data.custom_array[i].replace(rex, replacement));

            isMatch = true;

        }

    }

    return isMatch;

}, {autoExpand: true});

EDIT: fixed formatting

[dparreno]

That helped a lot! Thank you very much!