我有两个问题，有点相关。
1）是否可能将下面的两个函数合并成一个更加流畅的函数，或者我必须只创建一个函数并在这两个事件监听器中调用它。
input.addEventListener("keyup", () => {
if (event.keyCode === 13) {
// code here
}
并且
input.addEventListener("click", () => {
// code here
}
但这本质上是代码的复制
2) 是否有一种方法可以基于数组内容创建简单/基本的自动完成菜单（类似于Google，但远远不如它强大），在输入/搜索栏中输入时？为了澄清，w3schools的示例对我无效。
var elem = document.querySelector('input')
elem.addEventListener('keyup', eventhandler, false);
//elem.addEventListener('click', eventhandler, false);// not sure about this event
elem.addEventListener('keydown', eventhandler, false);
function eventhandler(event) {
if (event.keyCode === 13) { // you press enter you get alert
alert("hi");
}
}<input type="text" id="field">function doWhatIWant() {
// code here
}
input.addEventListener("keyup", () => {
if (event.keyCode === 13) {
doWhatIWant();
}
input.addEventListener("click", () => {
doWhatIWant();
}
<input type="text" id="input1" placeholder="searchbar">
<button id="button1" onclick=foo()>Search</button>
function foo() {
searchResult = document.getElementById("input1").value;
// code here
}
const searchBar = document.getElementById("input1");
searchBar.addEventListener("keyup", () => {
if (event.keyCode === 13) {
// executes the button click
document.getElementById("myBtn").click();
}
});
对于您问题中的＃1，其他答案似乎已经足够了。
作为另一种选择，您可以使用一些现代JS编写代码，为事件名称数组添加侦听器，并在处理程序函数中处理它们，如下所示：
// Handle keyup/click.
const handlerFn = e => e.type === 'keyup' ? e.keyCode === 13 && doSomething( e.type ) : doSomething( e.type );
// Did something.
const doSomething = type => console.log( `did something when ${type} triggered.` );
// Add handle/click listeners.
['keyup', 'click'].forEach( e => window.addEventListener( e, event => handlerFn( event ) ) );Click in here, or press enter.就第二点而言，并且实现第一点，使用数据数组进行过滤，是有可能在您输入时触发搜索的。
作为一种非常基本的实现方法，我建议编写一个函数来处理JS中的正则表达式匹配，通过keyup事件触发它，这样用户在输入时就可以进行过滤。
以下是使用输入和搜索与一些虚拟数据进行搜索的示例：
// Some data to filter/search while typing.
const thingsToFilter = [
{
title: "One one one title",
description: "description for this one one one"
},
{
title: "Number 2",
description: "2 is two."
},
{
title: "Another Thing",
description: "description for another things"
}
];
// Function to match searches.
const findMatches = (stringToMatch, thingsToFilter) => {
return thingsToFilter.filter(function(thingToFilter) {
var regex;
// Search for the stringToMatch from thingsToFilter.
regex = new RegExp(stringToMatch, "gi");
// Returns matches based on title or description.
return thingToFilter.title.match(regex) || thingToFilter.description.match(regex);
});
};
// Setup event listener for typing in input.
const pageSearch = document.getElementById("search");
pageSearch.addEventListener("keyup", () => {
let val = pageSearch.value;
if (val) {
let matched = findMatches(val, thingsToFilter);
if (matched) {
let markup = matched.map(result => `<div class="search-result">${result.title}:${result.description}</div>` ).join("");
document.getElementById("search-results").innerHTML = markup;
}
}
});<input type="text" id="search" placeholder="Search...">
<div id="search-results"></div>thingsToFilter数组能够更新？我有一个自动完成功能，只要数组是预定义的，它就可以工作。但是，我希望从rest api下载该数组以供使用，但如果我下载该数组，则似乎无法正常工作。 - Anan
Unexpected use of 'event' no-restricted-globals，文档没有涵盖此问题。 - Anan