Question

我还是编程的新手，目前我遇到了一个问题。我使用了W3schools的代码，它允许我在匹配搜索结果时过滤表格。但是，我想让网站的用户更好。我想让他们能够搜索搜索框，并让他们选择从框中选择一个返回相同结果的下拉列表。

以下是我用于HTML的代码：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."><table id="myTable">
<tr class="header">
    <th style="width:60%;">Fruit Name</th>
    <th style="width:40%;">Place of Origin</th>
</tr>
<tr>
    <td>Apple</td>
    <td>Asia</td>
</tr>
<tr>
    <td>Black Berry</td>
    <td>North America</td>
</tr>
<tr>
    <td>Durian</td>
    <td>SouthEast Asia</td>
</tr>
<tr>
    <td>Watermelon</td>
    <td>South Korea</td>
</tr></table>

使用的JavaScript：

<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");
        // Loop through all table rows, and hide those who don't match the search query
        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>

我很抱歉这个烂摊子，简而言之，这些是从 W3school 网站上取得的一些变化。如果可能的话，我想用搜索框实现下拉，而不只是一个搜索框。任何帮助将不胜感激。

Answer 1

根据您的评论，以下是带搜索框的更新代码以及将过滤行的下拉列表：

＆＃13;

function myFunction(searchTerm) {
  var input, filter, table, tr, td, i;
  filter = searchTerm.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  // Loop through all table rows, and hide those who don't match the search query
  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";
      }
    }
  }
}

var options = $("#fruitOptions");
$("#myTable tr:not(.header)").each(function() {
  options.append($("<option />").val($(this).find("td:first-child").text()).text($(this).find("td:first-child").text()));
});

$("#myInput").on('input', function() {
  myFunction($(this).val());
});

$("#fruitOptions").on('change', function() {
  myFunction($(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="Search for names..">
<select id="fruitOptions">
<option value=''>- Please select -</option></select>
<table id="myTable">
  <tr class="header">
    <th style="width:60%;">Fruit Name</th>
    <th style="width:40%;">Place of Origin</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Asia</td>
  </tr>
  <tr>
    <td>Black Berry</td>
    <td>North America</td>
  </tr>
  <tr>
    <td>Durian</td>
    <td>SouthEast Asia</td>
  </tr>
  <tr>
    <td>Watermelon</td>
    <td>South Korea</td>
  </tr>
</table>

＆＃13;

Answer 2

试试这个：

HTML

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
    <select id="selectItems">
        <option>NA</option>
    </select>
<table id="myTable">

    <tr class="header">
        <th style="width:60%;">Fruit Name</th>
        <th style="width:40%;">Place of Origin</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>Asia</td>
    </tr>
    <tr>
        <td>Black Berry</td>
        <td>North America</td>
    </tr>
    <tr>
        <td>Durian</td>
        <td>SouthEast Asia</td>
    </tr>
    <tr>
        <td>Watermelon</td>
        <td>South Korea</td>
    </tr></table>

使用Javascript：

function init()
{
 //insert item in dropdown from table.

 var html_for_elect = '';
 var itm_dd = document.getElementById("selectItems");

 table1 = document.getElementById("myTable");
 trtbl = table1.getElementsByTagName("tr");

 for (i = 0; i < trtbl.length; i++) {
            td = trtbl[i].getElementsByTagName("td")[0];
            if (td) {
                html_for_elect = html_for_elect + "<option>"+td.innerHTML+"</option>";

            }
        }
itm_dd.innerHTML = html_for_elect;
}
init();
    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");
        // Loop through all table rows, and hide those who don't match the search query
        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";
                }
            }
        }




    }
    function myFunction1() {
        var input, filter, table, tr, td, i;
        input = document.getElementById("selectItems");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        // Loop through all table rows, and hide those who don't match the search query
        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.getElementById("myInput").value= input.value;

    }

// myFunction1 can be use as (only use one of these myFunction1 functions):

function myFunction1() {

        document.getElementById("myInput").value= 
        document.getElementById("selectItems").value;
        myFunction();

    }

如何使用下拉搜索框来过滤表格结果？

2 个答案: