用鼠标按下时记录数据列表值

Question

我遇到了一个问题。用鼠标选择/单击时，如何从数据列表中控制台日志所选选项/值？

var input = document.querySelector("input");
var options = Array.from(document.querySelector("datalist").options).map(function(el){
return el.innerHTML;
}); //Optional if you have data
input.addEventListener('keypress', function(e){
if(e.keyCode == 13){
var relevantOptions = options.filter(function(option){
return option.toLowerCase().includes(input.value.toLowerCase());
}); // filtering the data list based on input query
if(relevantOptions.length > 0){
input.value = relevantOptions.shift(); //Taking the first
console.log(input.value)
}
}
});

<input list='typesOfFruit' placeholder="Enter a fruit...">
<datalist id='typesOfFruit'>
<option>Apple</option>
<option>Orange</option>
<option>Banana</option>
</datalist>

Answer 1

如果我理解正确，请选择您的元素，并向其中添加一个eventListener来侦听"更改">

const input = document.querySelector('input');
input.addEventListener('change', (e) => { console.log(e.target.value) })

在你的例子中，只做这个

var input = document.querySelector("input");
// above mentioned eventListener
input.addEventListener('change', function(event){
console.log(`selected value: ${event.target.value}`)
})
var options = Array.from(document.querySelector("datalist").options).map(function (el) {
return el.innerHTML;
}); //Optional if you have data
input.addEventListener('keypress', function (e) {
if (e.keyCode == 13) {
var relevantOptions = options.filter(function (option) {
return option.toLowerCase().includes(input.value.toLowerCase());
}); // filtering the data list based on input query
if (relevantOptions.length > 0) {
input.value = relevantOptions.shift(); //Taking the first
console.log(input.value)
}
}
});