Функция поиска в организационной диаграмме Google

Question

Я работаю с организационной диаграммой Google, я подготовил диаграмму, но теперь я хочу реализовать функцию поиска в организационной диаграмме Google, поэтому я поместил одно текстовое поле, а в текстовом поле я добавил границу. новый класс .

здесь у меня есть код

Jquery Код

  google.charts.load('current', {packages:["orgchart"]});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');

    // For each orgchart box, provide the name, manager, and tooltip to show.
    data.addRows([
      [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
       '', 'The President'],
      [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
       'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
    ]);

    // Create the chart.
    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    // Draw the chart, setting the allowHtml option to true for the tooltips.
    chart.draw(data, {'allowHtml':true});
    loadjs();
  }
  
  function loadjs() {
    $("#txtsearch").keyup(function () {
        var srch = $(this).val().toLowerCase();
        if (srch != "" && srch.length >= 2) {
            $('.google-visualization-orgchart-table tr').filter(function () {
            var tdval = $(this).text().toLowerCase();
                        if (tdval.indexOf(srch) > -1) {
                            $(this).children().addClass("searchnode");
                        }
                });
        }
        else {
            $('.google-visualization-orgchart-table tr >td').each(function () {
                $(this).removeClass("searchnode");
            });
        }
    });
}

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<input type="text" id="txtsearch" style="float:right" class="form-group" />
<div id="chart_div"></div>

CSS

.searchnode {
    border: 2px solid #e34b4b;
}

здесь также ссылка jsfiddle, я не могу гиперссылка на скрипт ссылку https://jsfiddle.net/8429foam/8/ он показывает ошибку при публикации сообщения.

Все работает нормально, он добавляет класс в td, но я не Не знаю, почему граница не применяется к ячейке поиска.

Любая помощь или предложение будут оценены.

Заранее спасибо.

Answer 1

У вас почти все заработало, но я изменил 2 вещи:

$('.google-visualization-orgchart-table tr td').filter(function () {
    var tdval = $(this).text().toLowerCase();
    if (tdval.indexOf(srch) > -1) {
        $(this).addClass("searchnode");
    }
});

Я добавил td в селектор и удалил .children()

.searchnode {
    border: 2px solid #e34b4b!important;
}

Google css отменяет вашу границу, поэтому я добавил !important.

Вы можете попробовать это здесь. https://jsfiddle.net/gpnuhj0r/