Question

在过去的两天里，我尝试了很多不同的事情，但我无法按照我的意愿去做。

function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");

  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];

    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }

  }
}

由于某些原因它在JSFiddle中根本不起作用，但是在我的内部代码上它可以工作并搜索整个元素。

我希望它只搜索id = name元素而不是整个元素，否则当有人输入“Ext”时，它会让所有人都来...

由于

利

Answer 1

我认为这应该可以解决问题：fiddle

function myFunction() {
  var input, filter, ul, li, n, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  
  for (i = 0; i < li.length; i++) {
    n = li[i].querySelector("#name");
		if (!n) continue;
    if (n.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }

  }
}
document.querySelector('#myInput').addEventListener('keyup',myFunction)

#myInput {
  background-image: url('/images/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 50%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

#myUL li a.header {
  background-color: #e2e2e2;
  cursor: default;
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

<input type="text" id="myInput" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li><a href="#" class="header">A</a></li>
  <li>
    <a href="#">
      <div style="float: left;padding-right: 20px;">
        <p id="name"><b>Aimee Smith</b></p>
        <p id="f14">Accounts Payroll</p>
        <br><b>Ext:</b> 670
        <p><b>eMail:</b> aimee.smith@domain.com</p>
      </div>

      <div style="float: none; clear: both;"></div>
    </a>
  </li>
  <li><a href="#" class="header">B</a></li>
  <li><a href="#" class="header">C</a></li>
  <li><a href="#" class="header">D</a></li>
  <li><a href="#" class="header">E</a></li>
  <li><a href="#" class="header">F</a></li>
  <li><a href="#" class="header">G</a></li>
  <li><a href="#" class="header">H</a></li>
  <li><a href="#" class="header">I</a></li>
  <li><a href="#" class="header">J</a></li>
  <li><a href="#" class="header">K</a></li>
  <li><a href="#" class="header">L</a></li>
  <li>
    <a href="#">
      <div style="float: left;padding-right: 20px;">
        <p id="name"><b>Lee Smith</b></p>
        <p id="f14">IT Support</p>
        <br><b>Ext:</b> 676
        <p><b>eMail:</b> lee.smith@domain.com</p>
      </div>
      <div style="float: none; clear: both;"></div>
    </a>
  </li>
  <li><a href="#" class="header">M</a></li>
  <li>
    <a href="#">
      <div style="float: left;padding-right: 20px;">
        <p id="name"><b>Mark Smith</b></p>
        <p id="f14">IT Manager</p>
        <br><b>Ext:</b> 666
        <p><b>eMail:</b> mark.smith@domain.com</p>
      </div>
      <div style="float: none; clear: both;"></div>
    </a>
  </li>
  <li><a href="#" class="header">N</a></li>
  <li><a href="#" class="header">O</a></li>
  <li><a href="#" class="header">P</a></li>
  <li><a href="#" class="header">Q</a></li>
  <li><a href="#" class="header">R</a></li>
  <li><a href="#" class="header">S</a></li>
  <li><a href="#" class="header">T</a></li>
  <li><a href="#" class="header">U</a></li>
  <li><a href="#" class="header">V</a></li>
  <li><a href="#" class="header">W</a></li>
  <li><a href="#" class="header">X</a></li>
  <li><a href="#" class="header">Y</a></li>
  <li><a href="#" class="header">Z</a></li>
</ul>

另一件事是 - 如果你也想隐藏标签。

Answer 2

您可以更有选择性地搜索搜索内容。您正在搜索整个A元素，而您应该在。

中选择第一个

querySelector将返回第一个匹配元素：

  for (i = 0; i < li.length; i++) {
    a = li[i].querySelector("a p");
    if (a && a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }

请参阅... https://jsfiddle.net/e2trzpqL/1/

让indexOf（）只搜索名称而不是整个元素

2 个答案: