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

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

javascript html

Javascript 如何为同一页面上的两个不同帖子创建两个不同的搜索表单？,javascript,html,Javascript,Html,我创建了一个选项卡，它与此完全相同在每个选项卡中，我都希望有一个搜索表单，我在w3school中发现了一个搜索表单，但它只在第一个选项卡上有效，即使我更改了id名称。我正在WordPress中使用wpbakery插件。谢谢，我写了一个非常简单的示例，您可以使用它来改进它，并根据需要进行更改（您可以将它粘贴到您提供的w3站点示例中）： * { 框大小：边框框； } #我的输入{ 背景图片：url（'/css/searchicon.png'）；背景位置：10px 12px；背景重复：无重

我创建了一个选项卡，它与此完全相同

在每个选项卡中，我都希望有一个搜索表单，我在w3school中发现了一个搜索表单，但它只在第一个选项卡上有效，即使我更改了id名称。我正在WordPress中使用wpbakery插件。

谢谢，

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


* {
框大小：边框框；
}
#我的输入{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
myUL先生{
列表样式类型：无；
填充：0；
保证金：0；
}
李美儿先生{
边框：1px实心#ddd；
页边距顶部：-1px；/*防止双边框*/
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块
}
.myUL li a:悬停：非（.header）{
背景色：#eee；
}
标签
选项卡非常适合于单页web应用程序，或者适合于能够显示不同主题的web页面。点击下面的链接
名字
玩具
汽车
搜索名称









搜索玩具






搜索汽车






函数openTab（参数）{
var i；
var x=document.getElementsByClassName（“选项卡”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

您好，我从w3schools（，）网站获取了代码，并回答了您的问题

函数openCity（cityName）{
var i；
var x=document.getElementsByClassName（“城市”）；
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
}

*{
框大小：边框框；
}
.myInput{
背景图片：url（'/css/searchicon.png'）；
背景位置：10px 12px；
背景重复：无重复；
宽度：100%；
字体大小：16px；
填充：12px 20px 12px 40px；
边框：1px实心#ddd；
边缘底部：12px；
}
myUL先生{
列表样式类型：无；
填充：0；
保证金：0；
}
李美儿先生{
边框：1px实心#ddd；
页边距顶部：-1px；/*防止双边框*/
背景色：#f6f6f6；
填充：12px；
文字装饰：无；
字号：18px；
颜色：黑色；
显示：块
}
.myUL li a:悬停：非（.header）{
背景色：#eee；
}


标签
选项卡非常适合于单页web应用程序，或者适合于能够显示不同主题的web页面。点击下面的链接
伦敦
巴黎
东京
伦敦
伦敦是英国的首都









巴黎
巴黎是法国的首都









东京
东京是日本的首都

请为我们提供一些代码。当我为“巴黎”和“搜索框”制作两个不同的列时，它不起作用。就像我不希望搜索框在城市名称的正下方一样。你知道吗？在这种情况下，你必须学习css中的位置，你的案例需要相对和绝对位置。别忘了给我一个很好的答案，让我得到社区的评价。

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