Question

我有两个问题，有些相关。

1）可以将下面的2个函数组合为1个更简化的函数，或者我必须简单地创建一个函数并在两个事件监听器中调用它

input.addEventListener("keyup", () => {
   if (event.keyCode === 13) {
     // code here 
}

和

input.addEventListener("click", () => {
     // code here 
}

但这实际上是代码的重复

2）有没有一种方法可以根据数组的内容制作一种简单/基本的自动完成菜单（类似于google，但功能远不及它）？在输入/搜索栏中输入？为了澄清起见，w3schools示例对我不起作用。

Answer 1

这是将多个事件附加到单个元素的方法。作为参考，您可以看看mozilladocs

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">

Answer 2

使用在两个事件侦听器中调用的单独函数。

function doWhatIWant() {
    // code here
}

input.addEventListener("keyup", () => {
   if (event.keyCode === 13) {
     doWhatIWant();
}

input.addEventListener("click", () => {
     doWhatIWant();
}

Answer 3

您可以尝试将onclick事件监听器和/或按键事件监听器直接添加到按钮上，并在JavaScript中添加另一个，并在其自己的函数中运行代码内容。

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

对于自动完成菜单，我不确定，但是您可以尝试将其变成下拉菜单，但是，这很可能会使您对问题的第一部分的要求无效

Answer 4

对于您问题中的第一名，其他答案似乎就足够了。

作为替代方案，您可以使用一些现代的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.

在＃2方面，并在实现＃1方面，是的，当您使用一系列数据进行过滤时，有可能触发搜索。

作为一个非常基本的实现，我建议编写一个函数来通过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>

有没有一种方法可以同时添加onkeypress和onclick事件监听器？

4 个答案: