Question

HTML

<input id="myInput" type="text" onkeyup="ContactsearchFX()" 
       placeholder="Search Titles">
    *</p>
<table id="myTable" style="width: 100%" class="style1">

JAVASCRIPT

window.onload = function() {
   var rows = document.querySelectorAll('tr');

   for (var i = 0; i < rows.length; i++) {
    rows[i].style.display = 'none';
   }
 }

function ContactsearchFX() {
  var input, filter, table, tr, td, i;

   input = document.getElementById("myInput");

  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
     if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
     } else {
       tr[i].style.display = "none";

      }
    }
  }

   var rows = document.querySelectorAll('tr');

   if (input.value.length == 0) {
    for (var i = 0; i < rows.length; i++) {
      rows[i].style.display = 'none';
    }
  }
}

一直在尝试实施https://markjs.io/以及其他各种解决方案，而没有修复或解决方案。希望有足够的信息继续。请询问您是否需要更多详细信息。

Answer 1

设置

从您共享的代码来看，您可能没有使用 es6 或js捆绑程序来设置项目。这意味着没有import和库<scrpit>进入您的index.html

步骤

验证您是否正确加载了脚本
清理代码
- 将其分成多个部分以更好地了解发生了什么
使用程序包“入门”所述的突出显示功能更新代码

注释

使用mark.js库，最好在再次应用标记之前先清理标记（.unmark()）。因为它将在每次更改中添加更多元素。这就是为什么我们在每个上下文中保留一个mark实例（上下文是表格元素），而不是在highlightChanges函数内部创建新实例的原因

以下代码段不是此功能的最佳实现，但可以作为起点。它是基于原始代码

具有突出显示的摘要

var input, table, rows, markInstance;

window.onload = function init() {
  input = document.getElementById("myInput");
  table = document.getElementById('myTable');
  rows = table.querySelectorAll('tr');
  markInstance = new Mark(table);

  clear();
}

function ContactsearchFX() {

  clear();

  if (input.value.length == 0) return;

  filterRows(input.value);
  highlightMatches(input.value);
}

function clear() {
  markInstance.unmark();
  
  for (var i = 0; i < rows.length; i++) {
    rows[i].style.display = 'none';
  }
}

function filterRows(text) {
  var part = text.toUpperCase();

  for (i = 0; i < rows.length; i++) {
    var row = rows[i];
    var td = row.getElementsByTagName("td")[0];

    if (td) {
      // part = GI
      // innerHtml = <MARK DATA-MARKJS="TRUE">G</MARK>ITHUB (wont match)
      // innerText = GITHUB (will match)
      var content = td.innerText.toUpperCase();

      if (content.includes(part)) {
        row.style.display = "";
      }
    }
  }
}

function highlightMatches(text) {
   markInstance.mark(text);
}

.input-wrap {
  margin-bottom: 12px;
}

.hints {
  display: none;
  margin-top: 12px;
}

#myInput:invalid~.hints {
  display: block;
}

mark {
    background: orange;
    font-weight: bold;
    color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.js"></script>

<div class="input-wrap">
  <label>
    Search Titles: 
    <input id="myInput" type="text" required 
           onkeyup="ContactsearchFX()" 
           placeholder="Search Titles" />

    <span class="hints">
      Hints: type "git", "bit", "forge" ...
    </span>
  </label>
</div>

<table id="myTable" style="width: 100%" class="style1">
  <tr>
    <th>Title</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Github</td>
    <td>Is the HUB</td>
  </tr>
  <tr>
    <td>Gitlab</td>
    <td>Have nice CI</td>
  </tr>
  <tr>
    <td>Bitbucket</td>
    <td>Has Jira integration (Duh)</td>
  </tr>
  <tr>
    <td>SourceForge</td>
    <td>Open source projects live here. It is said</td>
  </tr>
</table>

以及更适合生产的版本

快速浏览示例和options函数回顾的mark()参数的API，我们可以用options的钩子代替大多数逻辑

debounce输入事件处理程序（来自lodash _.debounce的函数）通过这种方式，过滤将在用户停止键入（超过250毫秒）时开始过滤。

内容再次从头开始.unmark()-不同的部分是，当done完成时，我们将options参数与highlightMatches回调一起使用，以继续unmark < / p>

options参数有一个each属性，它是每个匹配元素的回调。使用此回调，我们可以搜索它必须是行的父级，并添加一个类show，以便该行变得可见。

还有一个noMatch道具，如果文本没有匹配，它将被称为（返回），因此我们可以显示一些提示来尝试其他文本

options参数包含其他有用的道具，这些道具可以配置匹配，例如通配符，区分大小写的匹配等...

var input, table, rows, noMatches, markInstance;

window.onload = function init() {
  input = document.getElementById('myInput');
  noMatches = document.getElementById('noMatches');
  table = document.getElementById('myTable');
  rows = table.querySelectorAll('tr');
  markInstance = new Mark(table);

  input.addEventListener('keyup', _.debounce(ContactsearchFX, 250));
}

function ContactsearchFX() {

  resetContent();

  markInstance.unmark({
    done: highlightMatches
  });

}

function resetContent() {
 noMatches.textContent = '';

  rows.forEach(function(row) {
    row.classList.remove('show');
  });
}

function highlightMatches() {
  markInstance.mark(input.value, {
    each: showParantRow,
    noMatch: onNoMatches,
  })
}

function showParantRow(element) {
  var row = element.closest('tr');
  row.classList.add('show');
}

function onNoMatches(text) {
  noMatches.textContent = 'No records match: "' + text + '"';
};

.input-wrap {
  margin-bottom: 12px;
}


#myInput:invalid~.hints {
  display: block;
}

#noMatches:empty, #noMatches:empty + .hints {
  display: none;
}

.filterTable tr {
  display: none;
}

.filterTable .show {
  display: table-row;
}

mark {
  background: orange;
  font-weight: bold;
  color: black;
}

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>

<div class="input-wrap">
  <label>
    Search Titles: 
    <input id="myInput" type="text" required
           placeholder="Search Titles" />
  </label>
</div>

<div class="hintsWrap">
  <p id="noMatches"></p>
  <p class="hints">
    Hints: type "git", "bit", "forge" ...
  </p>
</div>


<table id="myTable" style="width: 100%" class="filterTable">
  <tr>
    <td>Github</td>
    <td>Is the HUB</td>
  </tr>
  <tr>
    <td>Gitlab</td>
    <td>Have nice CI</td>
  </tr>
  <tr>
    <td>Bitbucket</td>
    <td>Has Jira integration (Duh)</td>
  </tr>
  <tr>
    <td>SourceForge</td>
    <td>Open source projects live here. It is said</td>
  </tr>
</table>

如何合并额外的js，以使其可能具有突出显示的表格过滤后的文本结果？

1 个答案:

设置

步骤

注释

具有突出显示的摘要

以及更适合生产的版本