在 HTML 表中搜索 - 组合多个值（下拉列表、文本字段 ..）答案

【问题标题】：Search in HTML-table - Combine multiple values (dropdown, textfield ..)在 HTML 表中搜索 - 组合多个值（下拉列表、文本字段 ..）
【发布时间】：2023-04-10 15:16:01
【问题描述】：

是否可以在表单中添加下拉菜单，并且该功能会将下拉菜单中的选定值和文本字段的值结合起来进行搜索？

代码应用于 HTML 表格，以便访问者可以在表格中进行搜索。

谢谢！ :)

<script type="text/javascript">

function search (phrase, _id){
    var words = phrase.value.toLowerCase().split(" ");
    var table = document.getElementById(_id);
    var ele;
    for (var r = 0; r < table.rows.length; r++){
        ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
        var displayStyle = 'none';
        for (var i = 0; i < words.length; i++) {
            if (ele.toLowerCase().indexOf(words[i])>=0)
                displayStyle = '';
            else {
                displayStyle = 'none';
                break;
            }
        }
        table.rows[r].style.display = displayStyle;
    }
}

</script>

<form>

<b>Words:</b>

<input name="filter" onkeyup="search(this, 'my-table', 1)" type="text">

</form>

【问题讨论】：

标签： javascript html search filter

【解决方案1】：

var words = phrase.value.toLowerCase().split(" ");之后
试试这个：

var dd = document.getElementById("your_dropdown_id");
words.push(dd.options[dd.selectedIndex].text);

.
.
更新：

上面显示的是您原始问题的答案。现在你有一些不同的问题。

您的问题是，您正在搜索一个包含大写字母的字符串（即“HBO”或“MBO”），该字符串中所有字母均为小写（您在if 条件中使用了ele.toLowerCase() .)
现在试试这个：

var displayStyle = 'block';
for (var i = 0; i < words.length; i++)
    if (ele.toLowerCase().indexOf(words[i].toLowerCase()) == -1) {
        displayStyle = 'none';
        break;
    }

将displayStyle 初始化为'block' 并在break; 之前更改它，在整个上面显示的代码中，是此逻辑的最佳方式。
希望这能解决您的问题。

【讨论】：

@Maarten：请传达此答案是否对您有任何帮助或您遇到了一些问题，在这种情况下，我们也许可以帮助您或者请引导我们正确的方向。

【解决方案2】：

也许我做错了什么..

function search (phrase, _id){
    var words = phrase.value.toLowerCase().split(" ");

    var dd = document.getElementById("education");
    words.push(dd.options[dd.selectedIndex].text);

    var table = document.getElementById(_id);
    var ele;
    for (var r = 0; r < table.rows.length; r++){
        ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
        var displayStyle = 'none';
        for (var i = 0; i < words.length; i++) {
            if (ele.toLowerCase().indexOf(words[i])>=0)
                displayStyle = '';
            else {
                displayStyle = 'none';
                break;
            }
        }
        table.rows[r].style.display = displayStyle;
    }
}

</script>

<form>

<b>Words:</b>

<input name="filter" onkeyup="search(this, 'my-table', 1)" type="text"><br>

<b>Education:</b>

<select id="education">
   <option value="">Select</option>
   <option value="MBO">MBO</option>
   <option value="HBO">HBO</option>
   <option value="University">University</option>
</select>

</form>

【讨论】：