Question

我想实现一个搜索功能，该功能使用输入在页面上查找文本，而无需按Enter键并隐藏其他与当前输入不匹配的内容。

棘手的东西：默认情况下，我页面上的文本是隐藏的，只有将其悬停在其容器图块上才能看到。整个页面也是由脚本构建的。这是结构：

<div id="data" class="grid-container">
<div class="grid-item">
    <div class="inside" id="item0">
        <h2 id="contents0" class="content-title" href="some link">some headline</h2>
        <div class="collapsing">
            <br>
            <table>
                <tbody>
                    <tr id="tr0">
                        <td class="tabledata">
                            <a class="content" href="some link">some headline</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="tabledata">
                            <a class="content" href="some link">some headline</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="tabledata">
                            <a class="content" href="some link">some headline</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

因此有各种各样的网格项目，其中有不同数量的表数据。这是输入：

<input class="search" type="search" placeholder="Search" id="input">

关于我的特殊情况如何执行此操作的任何想法？如果内部没有任何东西与当前输入匹配，我想隐藏整个网格项；如果同一网格项中有一个或多个其他表数据匹配，我只想隐藏不匹配当前输入的表数据。

这是我在此处编辑建议的尝试：

<script>
        function findDom(val) {
            if (val === '') {
                document.querySelectorAll('.hideElem').forEach(function(item) {
                item.classList.remove('hideElem')
            })
            return;
            }
            document.querySelectorAll('.content').forEach(function(item) {
                if (item.textContent.trim().includes(val)) {
                    item.classList.remove('hideElem')
                }
                else {
                    item.classList.add('hideElem')
                }
            })
        }
        document.getElementById('input').addEventListener('keyup', (e) => {
            setTimeout(function() {
                findDom(e.target.value.trim())
            }, 2000)
        })
    </script>

CSS：

.hideElem {
display: none;

} 但是它根本不起作用...

Answer 1

请检查嵌入式注释以获取描述

   // this function will first check if the search value is empty , then 
   // it will get all the a tag that are visible and will hide them
   function findDom(val) {
  if (val === '') {
    document.querySelectorAll('.showElem').forEach(function(item) {
      item.classList.remove('showElem')

    })
    return;
  }
 // otherwise it is going to get the content from each a tag and will check
 // if the conent includes the search keyword, in that case it will show 
 // the a
  document.querySelectorAll('.content').forEach(function(item) {
    // hiding previously displayed a tags
    item.classList.remove('showElem')
    // check if current a tag contains this text
    if (item.textContent.trim().includes(val)) {
      item.classList.add('showElem')
    }

  })

}
// this will get the value entered in the text field
document.getElementById('ip').addEventListener('keyup', (e) => {
 // wait for 2 secs for and search for the value, without timeout it will 
 // search for every text entered
  setTimeout(function() {
    findDom(e.target.value.trim())
  }, 2000)
})

.content {
  display: none;
}

.showElem {
  display: block;
}

<div id="data" class="grid-container">
  <div class="grid-item">
    <div class="inside" id="item0">
      <h2 id="contents0" class="content-title" href="some link">some headline</h2>
      <div class="collapsing">
        <br>
        <table id='table'>
          <tbody>
            <tr id="tr0">
              <td class="tabledata">
                <a class="content" href="some link">some 1</a>
              </td>
              <td class="tabledata">
                <a class="content" href="some link">some 2</a>
              </td>
              <td class="tabledata">
                <a class="content" href="some link">some 3</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>


  <input class="search" id='ip' type="text" placeholder="Search" id="input">

javascript搜索功能可隐藏所有不匹配输入的内容

1 个答案: