小贝子编程

在单击搜索框时如何制作列表div



我正在尝试在平原HTML中制作组合。像两个Div一样，搜索框的第一个DIV和列表的第二个DIV。我想要单击searcbox时，只会出现列表或像combobox一样渲染。

代码。

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}
#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}
#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}
#myTable tr {
  border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>UK</td>
  </tr>
  <tr>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Italy</td>
  </tr>
  <tr>
    <td>UK</td>
  </tr>
  <tr>
    <td>France</td>
  </tr>
</table>
<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>
</body>
</html>

如何集成搜索框并在不同的div和列表中列表仅在搜索框的单击中出现，例如combobox。

您只能使用 CSS 实现此

更新您的 css at 

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
  margin-top: -12px; // Remove space between table and input
  display: none; // Hide table by default
}

添加以下 CSS 

 #myInput:focus + #myTable{
   display: block;  // Show table on focus
}
#myTable:hover{
 display: block;
}

更新：

添加以下JS以从列表中选择选项

document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr){
    _tr.addEventListener('click',function(){
              document.getElementById('myInput').value =  this.getElementsByTagName('td')[0].textContent;
    });
});

update-2

用于多次选择的使用以下JS 

document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr){
    _tr.addEventListener('click',function(){
        var selection = this.getElementsByTagName('td')[0].textContent; //current selection      
        var selections = document.getElementById('myInput').value; //Old Selections
        if(selections !="" ) selections +=","; //add seperator if selections is not empty.
        if(selections.indexOf(selection)!=-1) return; //if selection already exist return.
        selections+= selection; //Append selection to selections
        document.getElementById('myInput').value = selections;
    });
});

这是摘要

<html>
<head>
<style>
* {
  box-sizing: border-box;
}
#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}
#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
  display: none;
  margin-top:-12px;
}
#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}
#myTable tr {
  border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}
#myInput:focus + #myTable{
  display: block;
}
#myTable:hover{
 display: block;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Name</th>
    <th style="width:40%;">Country</th>
  </tr>
  <tr>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>UK</td>
  </tr>
  <tr>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Italy</td>
  </tr>
  <tr>
    <td>UK</td>
  </tr>
  <tr>
    <td>France</td>
  </tr>
</table>
<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr){
    _tr.addEventListener('click',function(){
var selection = this.getElementsByTagName('td')[0].textContent;        
var selections = document.getElementById('myInput').value;
        if(selections !="" ) selections +=",";
        if(selections.indexOf(selection)!=-1) return;
        selections+= selection;
 			  document.getElementById('myInput').value = selections;
	});
});
</script>
</body>
</html>

您的意思是这样吗？

        <!DOCTYPE html>
    <html>
    <head>
    <style>
    * {
      box-sizing: border-box;
    }
    #myInput {
      //background-image: url('/css/searchicon.png');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 100%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    #myTable {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #ddd;
      font-size: 18px;
    }
    #myTable th, #myTable td {
      text-align: left;
      padding: 12px;
    }
    #myTable tr {
      border-bottom: 1px solid #ddd;
    }
    #myTable tr.header, #myTable tr:hover {
      background-color: #f1f1f1;
    }
    </style>
    </head>
    <body>
    <h2>My Customers</h2>
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
    <div id="searchResult">
        <form>
            <select name="search" id="search" style="display: none;">
            </select>
        </form>
    </div>
    <table id="myTable">
      <tr class="header">
        <th style="width:60%;">Name</th>
        <th style="width:40%;">Country</th>
      </tr>
      <tr>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Sweden</td>
      </tr>
      <tr>
        <td>UK</td>
      </tr>
      <tr>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Italy</td>
      </tr>
      <tr>
        <td>UK</td>
      </tr>
      <tr>
        <td>France</td>
      </tr>
    </table>
    <script>
    function myFunction() {
      var input, filter, table, tr, td, i, searchBox;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      searchBox = document.getElementById("search");
      var option = document.createElement("option");
        var length = searchBox.options.length;
        for (i = 0; i < length; i++) {
          searchBox.options[i] = null;
        } 
        if(filter === ""){
            document.getElementById("search").style.display = "none";
        }
        else {
          for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
              if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                //tr[i].style.display = "";            
                option.text = option.value = td.innerHTML.toUpperCase();
                searchBox.add(option);  
              } else {
                //tr[i].style.display = "none";
              }
            }       
          }
            var length = searchBox.options.length;
            if(length === 0) {
                document.getElementById("search").style.display = "none";
            }
            else {
                document.getElementById("search").style.display = "block";
            }

        }

    }
    </script>
    </body>
    </html>


  <!DOCTYPE html>
    <html>
    <head>
    <style>
    * {
      box-sizing: border-box;
    }
    #myInput {
      //background-image: url('/css/searchicon.png');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      width: 100%;
      font-size: 16px;
      padding: 12px 20px 12px 40px;
      border: 1px solid #ddd;
      margin-bottom: 12px;
    }
    #myTable {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #ddd;
      font-size: 18px;
    }
    #myTable th, #myTable td {
      text-align: left;
      padding: 12px;
    }
    #myTable tr {
      border-bottom: 1px solid #ddd;
    }
    #myTable tr.header, #myTable tr:hover {
      background-color: #f1f1f1;
    }
    </style>
    </head>
    <body>
    <h2>My Customers</h2>
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
    <div id="searchResult">
        <form>
            <select name="SearchThis" id="SearchThis" style="display: none;">
            </select>
        </form>
    </div>
    <table id="myTable">
      <tr class="header">
        <th style="width:60%;">Name</th>
        <th style="width:40%;">Country</th>
      </tr>
      <tr>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Sweden</td>
      </tr>
      <tr>
        <td>UK</td>
      </tr>
      <tr>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Italy</td>
      </tr>
      <tr>
        <td>UK</td>
      </tr>
      <tr>
        <td>France</td>
      </tr>
    </table>
    <script>
    function myFunction() {
      var input, filter, table, tr, td, i, searchBox;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      table = document.getElementById("myTable");
      tr = table.getElementsByTagName("tr");
      searchBox = document.getElementById("SearchThis");
      var option = document.createElement("option");
        var length = searchBox.options.length;
        for (i = 0; i < length; i++) {
          searchBox.options[i] = null;
        } 
        if(filter === "")
        {
            document.getElementById("SearchThis").style.display = "none";
        }
        else 
        {
          for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
              if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                //tr[i].style.display = "";            
                option.text = option.value = td.innerHTML.toUpperCase();
                searchBox.add(option);  
              } else {
                //tr[i].style.display = "none";
              }
            }       
          }
            var length = searchBox.options.length;
            if(length === 0) 
            {
                document.getElementById("SearchThis").style.display = "none";
            }
            else 
            {
                document.getElementById("SearchThis").style.display = "block";
            }
        }
    }
    </script>
    </body>
    </html>

可能这是您的欲望输出！检查一下，告诉我！

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium