Question

我已经创建了一个标签，该标签与https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_tabulators完全一样。

在每个标签中我都希望有一个搜索表单，我再次在w3school中找到了一个搜索表单，但是即使我更改了ID名称，它也仅在第一个标签上有效。 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_list 我正在WordPress中使用wpbakery插件。谢谢，

Answer 1

我写了一个非常简单的示例，您可以使用它来改进它并根据需要进行更改（可以将其粘贴到您提供的w3网站示例中）：

<style>
* {
  box-sizing: border-box;
}

    #myInput {
      background-image: url('/css/searchicon.png');
      background-position: 10px 12px;
      background-repeat: no-repeat;
      width: 100%;
      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:hover:not(.header) {
      background-color: #eee;
    }
    </style>
    <body>

    <div class="w3-container">
      <h2>Tabs</h2>
      <p>Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Click on the links below.</p>
    </div>

    <div class="w3-bar w3-black">
      <button class="w3-bar-item w3-button" onclick="openTab('names')">Names</button>
      <button class="w3-bar-item w3-button" onclick="openTab('toys')">Toys</button>
      <button class="w3-bar-item w3-button" onclick="openTab('cars')">Cars</button>
    </div>

    <div id="names" class="w3-container tab">
      <h2>Search Names</h2>
      <input type="text" id="nameInput" onkeyup="myFunction('nameInput', 'namesUL')" placeholder="Search for names.." title="Type in a name">
      <ul id="namesUL" class="myUL">
      <li><a href="#">Adele</a></li>
      <li><a href="#">Agnes</a></li>
      <li><a href="#">Billy</a></li>
      <li><a href="#">Bob</a></li>

      <li><a href="#">Calvin</a></li>
      <li><a href="#">Christina</a></li>
      <li><a href="#">Cindy</a></li>
    </ul>
    </div>

    <div id="toys" class="w3-container tab" style="display:none">
      <h2>Search Toys</h2>
      <input type="text" id="toyInput" onkeyup="myFunction('toyInput', 'toysUL')" placeholder="Search for toys.." title="Type in a toy">
        <ul id="toysUL" class="myUL">
      <li><a href="#">Baby</a></li>
      <li><a href="#">Mini Car</a></li>
      <li><a href="#">Doll</a></li>
      <li><a href="#">Blaster</a></li>
    </ul>
    </div>

    <div id="cars" class="w3-container tab" style="display:none">
      <h2>Search Cars</h2>
      <input type="text" id="carInput" onkeyup="myFunction('carInput', 'carsUL')" placeholder="Search for cars.." title="Type in a car">
          <ul id="carsUL" class="myUL">
      <li><a href="#">Audi</a></li>
      <li><a href="#">BMW</a></li>
      <li><a href="#">Fiat</a></li>
      <li><a href="#">Ferrari</a></li>
    </ul>
    </div>

    <script>
    function openTab(parameter) {
      var i;
      var x = document.getElementsByClassName("tab");
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
      }
      document.getElementById(parameter).style.display = "block";  
    }

    function myFunction(searchInput, searchBar) {
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById(searchInput);
        filter = input.value.toUpperCase();
        ul = document.getElementById(searchBar);
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {


  li[i].style.display = "none";
        }
    }
}

</script>

Answer 2

您好，我从w3schools（Tabulator，Search form）网站上获取了密码，我回答了您的问题

function openCity(cityName) {
        var i;
        var x = document.getElementsByClassName("city");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        document.getElementById(cityName).style.display = "block";
    }
    function myFunction(form) {
        var parent, filter, ul, li, a, i, txtValue;
        filter = form.value.toUpperCase();
        parent=form.parentElement;
        ul = parent.getElementsByClassName("myUL")[0];
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }

* {
        box-sizing: border-box;
    }

    .myInput {
        background-image: url('/css/searchicon.png');
        background-position: 10px 12px;
        background-repeat: no-repeat;
        width: 100%;
        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:hover:not(.header) {
        background-color: #eee;
    }

<div class="w3-container">
    <h2>Tabs</h2>
    <p>Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Click on the links below.</p>
</div>

<div class="w3-bar w3-black">
    <button class="w3-bar-item w3-button" onclick="openCity('London')">London</button>
    <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
    <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>

<div id="London" class="w3-container city">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <input type="text" class="myInput" onkeyup="myFunction(this)" placeholder="Search for names.." title="Type in a name">

    <ul class="myUL">
        <li><a href="#">Adele</a></li>
        <li><a href="#">Agnes</a></li>

        <li><a href="#">Billy</a></li>
        <li><a href="#">Bob</a></li>

        <li><a href="#">Calvin</a></li>
        <li><a href="#">Christina</a></li>
        <li><a href="#">Cindy</a></li>
    </ul>
</div>

<div id="Paris" class="w3-container city" style="display:none">
    <h2>Paris</h2>
    <p>Paris is the capital of France.</p>
    <input type="text" class="myInput" onkeyup="myFunction(this)" placeholder="Search for names.." title="Type in a name">

    <ul class="myUL">
        <li><a href="#">Adele</a></li>
        <li><a href="#">Agnes</a></li>

        <li><a href="#">Billy</a></li>
        <li><a href="#">Bob</a></li>

        <li><a href="#">Calvin</a></li>
        <li><a href="#">Christina</a></li>
        <li><a href="#">Cindy</a></li>
    </ul>
</div>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div id="Tokyo" class="w3-container city" style="display:none">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>
    <input type="text" class="myInput" onkeyup="myFunction(this)" placeholder="Search for names.." title="Type in a name">

    <ul class="myUL">
        <li><a href="#">Adele</a></li>
        <li><a href="#">Agnes</a></li>

        <li><a href="#">Billy</a></li>
        <li><a href="#">Bob</a></li>

        <li><a href="#">Calvin</a></li>
        <li><a href="#">Christina</a></li>
        <li><a href="#">Cindy</a></li>
    </ul>
</div>

如何为同一页面上的两个不同帖子创建两个不同的搜索表单？

2 个答案: