Javascript 如何在onkeyup中具有多个功能？

我正在编写代码，以便能够在从端点提取客户数据的卡中搜索多个字段。搜索customerID的第一个函数运行良好，但我也希望能够搜索其他字段。但我很难让它识别多个字段

是否有人知道如何在onkeyup字段中注册多个函数，以及我是否正确选择了querySelector中的forename字段

我的HTML代码：

<div class="container pt-3 pb-3">
    <div class="form-outline" id="customer-search-bar">
        <input type="search" id="filter" class="form-control" placeholder="Enter customer ID" aria-label="Search" onkeyup="searchID() && searchForename();" >
    </div>
    <div class="card-lists" id="card-lists">
       <div class="row">
          {% for data in raw.CustomerDataEntries %}
          <div class="card col-sm-12 mb-3" id="card-perim">
             <div class="card-body" id="card-body">
                <h5 class="card-title">Customer ID: {{ data.ExternalId }}</h5>
                <h5 class="card-title" name="forename">Forename: {{ data.Fields.forename }}</h5>
                <h5 class="card-title">Surname: {{ data.Fields.surname }}</h5>
                <h5 class="card-title">Postcode: {{ data.Fields.post_code }}</h5>
                <h5 class="card-title">Matches: {{ data.Matches }}</h5>
                <a href="#" class="tableButton">Details</a>
                <a href="#" class="tableButton">Edit</a>
             </div>
          </div>
          {% endfor %}
       </div>
    </div>
</div>

{raw.CustomerDataEntries%中的数据为%1}
客户ID:{data.ExternalId}
名称：{{data.Fields.Forename}}
姓氏：{{data.Fields.nam姓氏}
邮政编码：{{data.Fields.post_code}
匹配：{{data.Matches}
{%endfor%}

我的JS代码：

function searchID() {
    const input = document.getElementById('filter').value.toUpperCase();

    const cardContainer = document.getElementById('card-lists');
    console.log(cardContainer);

    const cards = cardContainer.getElementsByClassName('card-body');
    console.log(cards);

    for (let i = 0; 0 < cards.length; i++){
        let title = cards[i].querySelector(".card-body h5.card-title");
        if(title.innerText.toUpperCase().indexOf(input) > -1){
            cards[i].style.display = "";
        } else {
            cards[i].style.display = "none";
        }
    }
}

function searchForename() {
    const input = document.getElementById('filter').value.toUpperCase();

    const cardContainer = document.getElementById('card-lists');
    console.log(cardContainer);

    const cards = cardContainer.getElementsByClassName('card-body');
    console.log(cards);

    for (let i = 0; 0 < cards.length; i++){
        let title = cards[i].querySelector(".card-body h5[name='forename']");
        if(title.innerText.toUpperCase().indexOf(input) > -1){
            cards[i].style.display = "";
        } else {
            cards[i].style.display = "none";
        }
    }
}

函数searchID（）{
常量输入=document.getElementById（'filter'）.value.toUpperCase（）；
const cardContainer=document.getElementById（'card-lists'）；
控制台日志（cardContainer）；
const cards=cardContainer.getElementsByClassName（'card-body'）；
控制台.日志（卡片）；
for（设i=0；0-1）{
卡片[i].style.display=“”；
}否则{
卡片[i].style.display=“无”；
}
}
}
函数searchForename（）{
常量输入=document.getElementById（'filter'）.value.toUpperCase（）；
const cardContainer=document.getElementById（'card-lists'）；
控制台日志（cardContainer）；
const cards=cardContainer.getElementsByClassName（'card-body'）；
控制台.日志（卡片）；
for（设i=0；0-1）{
卡片[i].style.display=“”；
}否则{
卡片[i].style.display=“无”；
}
}
}

onkeyup属性中的值遵循JS语法，因此应该用分号分隔语句，

但是，使用内联事件处理程序并不是一种好的做法。现代最佳实践是不引人注目地绑定事件处理程序。在本机JS中，可以通过使用
addEventListener（）
来实现这一点，如下所示：


let filter=document.querySelector（“#filter”）；
filter.addEventListener（'keyup'，（）=>{
searchID（）；
SearchForName（）；
});
函数searchID（）{
console.log（'searchID'）；
}
函数searchForename（）{
console.log（'searchforname'）；
}
onkeyup

属性中的值遵循JS语法，因此应该用分号分隔语句，

但是，使用内联事件处理程序并不是一种好的做法。现代最佳实践是不引人注目地绑定事件处理程序。在本机JS中，可以通过使用
addEventListener（）
来实现这一点，如下所示：


let filter=document.querySelector（“#filter”）；
filter.addEventListener（'keyup'，（）=>{
searchID（）；
SearchForName（）；
});
函数searchID（）{
console.log（'searchID'）；
}
函数searchForename（）{
console.log（'searchforname'）；
}
谢谢！我已经做出了调整，以适应最佳实践。不过，第二个函数searchForName（）对我来说仍然不起作用。你认为这是因为我使用querySelector选择字段的方式吗？有没有在querySelector中选择多个字段的最佳实践方法？是的，我更新了答案，解释了问题并为您提供了解决方案谢谢！我已经做出了调整，以适应最佳实践。不过，第二个函数searchForName（）对我来说仍然不起作用。你认为这是因为我使用querySelector选择字段的方式吗？在querySelector中有没有选择多个字段的最佳实践方法？是的，我更新了答案，解释了问题并为您提供了解决方案