javascript - 如何创建可搜索的按钮列表？

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";

    }
  }
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Please type a keyword." title="FAQ Search">

<ul id="myUL">
  <li><button onclick="document.getElementById('id01').style.display='block'" class="w3-btn w3-white w3-hide-small"><i class="fa fa-info w3-margin-center"></i>How To Use This Site</button>
    <div id="id01" class="w3-modal">
      <div class="w3-modal-content">
        <div class="w3-container">
          <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">&times;</span>
          <p>Hello</p>
        </div>
      </div>
    </div>
  </li>
  <li><button onclick="document.getElementById('id02').style.display='block'" class="w3-btn w3-white w3-hide-small"><i class="fa fa-info w3-margin-center"></i>When to use</button>
    <div id="id02" class="w3-modal">
      <div class="w3-modal-content">
        <div class="w3-container">
          <span onclick="document.getElementById('id02').style.display='none'" class="w3-closebtn">&times;</span>
          <p>Hello</p>
        </div>
      </div>
    </div>
  </li>
</ul>

有没有人有脚本可以让我搜索这些按钮？

Answer 1

在您的 li 项中没有 a 元素。只需更改此行:

a = li[i].getElementsByTagName("a")[0];

到:

a = li[i].getElementsByTagName("button")[0];

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("button")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Please type a keyword." title="FAQ Search">

<ul id="myUL">
  <li><button onclick="document.getElementById('id01').style.display='block'" class="w3-btn w3-white w3-hide-small"><i class="fa fa-info w3-margin-center"></i>How To Use This Site</button>
    <div id="id01" class="w3-modal">
      <div class="w3-modal-content">
        <div class="w3-container">
          <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">&times;</span>
          <p>Hello</p>
        </div>
      </div>
    </div>
  </li>
  <li><button onclick="document.getElementById('id02').style.display='block'" class="w3-btn w3-white w3-hide-small"><i class="fa fa-info w3-margin-center"></i>When to use</button>
    <div id="id02" class="w3-modal">
      <div class="w3-modal-content">
        <div class="w3-container">
          <span onclick="document.getElementById('id02').style.display='none'" class="w3-closebtn">&times;</span>
          <p>Hello</p>
        </div>
      </div>
    </div>
  </li>
</ul>

附注当然，考虑到它不是 a 元素，也可以将变量的名称更改为有意义的名称...