Dynamic subfilter in text search results

(for OmegaT)

by Manuel Souto Pico

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic subfilter in text search results</title>
</head>
<body>
    <h1>Dynamic subfilter in text search results</h1>
    <input type="text" id="searchInput" placeholder="Search...">
    <ul id="itemList">
      <li>tm/abc/file.tmx<br/>-- Foo<br/>-- Bar1<br/>---------</li>
      <li>tm/def/file.tmx<br/>-- Foo<br/>-- Bar2<br/>---------</li>
      <li>tm/ghi/Johny/file.tmx<br/>-- Foo<br/>-- Qux1<br/>---------</li>
      <li>tm/jkl/file.tmx<br/>-- Foo<br/>-- Qux2<br/>---------</li>
      <li>tm/mno/file.tmx<br/>-- Foo<br/>-- Baz1<br/>---------</li>
      <li>tm/pqr/penalty-50/file.tmx<br/>-- Foo<br/>-- Baz2<br/>---------</li>
      <li>tm/stv/some-stuff/file.tmx<br/>-- Foo<br/>-- Bar<br/>---------</li>
      <li>tm/xyz/penalty-50/file.tmx<br/>-- Foo<br/>-- Bar<br/>---------</li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

CSS

ul {
  list-style-type: none;
}

JavaScript

document.getElementById('searchInput').addEventListener('input', function (event) {
    const searchTerm = event.target.value.toLowerCase();
    const listItems = document.querySelectorAll('#itemList li');

    listItems.forEach(function (item) {
        const itemText = item.textContent.toLowerCase();

        if (itemText.includes(searchTerm)) {
            item.style.display = 'list-item';
        } else {
            item.style.display = 'none';
        }
    });
});