Question

我有一个左侧树导航，顶部有一个搜索框。当用户在搜索框中输入一些文本时，树导航的匹配节点应该突出显示。我想用Java脚本来做，任何人都可以指出我的任何这样的例子或文档。

由于

Answer 1

没有任何HTML等，无法真正了解您的设置！但我认为你想要的东西如下：

使用indexOf查找选项中的任何匹配大小写，然后使用给定的位置，插入一个span以包含带黄色背景的匹配文本，以给人以高亮显示的印象。

超时仅仅是因为事件发生延迟，确保确保实时突出显示它。

document.onkeydown = function () {
    setTimeout(function () { //delay so can take the event fire into account
        var list = document.getElementsByClassName('tree');
        for (var i = 0; i < list.length; i++) {
            list[i].innerHTML = list[i].innerText;
            var pos = (list[i].innerHTML).indexOf(s.value);
            if (s.value !== '' && pos != -1) {
                var a = list[i].innerHTML.substring(0, pos) + '<span style="background: yellow;">' + list[i].innerHTML.substring(pos,1+ (list[i].innerHTML).indexOf(s.value.substr(s.value.length-1, 1))) + '</span>' + (list[i].innerHTML).substring(1+ (list[i].innerHTML).indexOf(s.value.substr(s.value.length-1, 1)), (list[i].innerHTML).length);
                list[i].innerHTML = a;
            }
        }
    }, 50);
};

使用JS突出显示Tree中的匹配节点

1 个答案: