Javascript 如何使用下拉搜索框筛选表格结果？

我仍然是编程新手，目前我遇到了一个问题。我使用了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>    

函数myFunction（）{
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}

我很抱歉这里一团糟，简言之，这些是从W3school网站上取下来的，做了一些改动。如果可能的话，我想用搜索框实现一个下拉列表，而不仅仅是一个搜索框。任何帮助都将不胜感激。

试试以下方法：

HTML

NA
果名
产地
苹果
亚洲
黑浆果
北美
榴莲
东南亚
西瓜
南韩

Javascript:

函数init（）
{
//在表的下拉列表中插入项。
var html_for_elect=''；
var itm_dd=document.getElementById（“selectItems”）；
table1=document.getElementById（“myTable”）；
trtbl=表1.getElementsByTagName（“tr”）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}
函数myFunction1（）{
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“selectItems”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
document.getElementById（“myInput”）.value=input.value；
}
//myFunction1可以用作（仅使用其中一个myFunction1函数）：
函数myFunction1（）{
document.getElementById（“myInput”）。值=
document.getElementById（“selectItems”）.value；
myFunction（）；
}

根据您的评论，下面是更新的代码和搜索框以及用于筛选行的下拉列表：

函数myFunction（搜索术语）{
var输入、过滤器、表格、tr、td、i；
filter=searchTerm.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
}
var期权=$（“收益期权”）；
$（“#myTable tr:not（.header）”）。每个（函数（）{
options.append（$（“”）.val（$（this）.find（“td:first child”）.text（））.text（$（this.find（“td:first child”）.text（））；
});
$（“#myInput”）。在（'input'，function（）上{
myFunction（$（this.val（））；
});
$（“#水果选项”）.on（'change'，function（）{
myFunction（$（this.val（））；
});

-请选择-
果名
产地
苹果
亚洲
黑浆果
北美
榴莲
东南亚
西瓜
南韩
那么您将拥有搜索框和下拉列表？是的，先生，我想要一个带有下拉列表OK的搜索框，因此您的代码中已经有一个搜索框，您想要添加下拉列表。下拉列表的选项是什么？是的，水果名称将用作下拉列表，因此，如果用户想要搜索水果，他们可以单击下拉列表，过滤表格，或者键入水果名称，过滤表格。如果用户从下拉列表中选择一个选项，并选择ente，该怎么办
    <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>

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();

    }