Question

我正在尝试在普通的HTMl中创建一个comboBox。像两个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>

如何将searchBox和列表集成到不同的div和列表中仅在点击搜索框（如组合框）时出现。

Answer 1

您只能使用 CSS 来实现此目标

将 CSS 更新为

#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;
    });
});

这是一个代码段

＆＃13;

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

＆＃13;

Answer 2

你的意思是这样吗？

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

Answer 3

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

愿这是你的愿望输出！检查并告诉我！

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

3 个答案: