Javascript 单击 HTML5 数据列表选项时执行操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30022728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Perform action when clicking HTML5 datalist option
提问by Hobbyist
I'm using a <datalist>
我正在使用 <datalist>
<datalist id="items"></datalist>
And using AJAX to populate the list
并使用 AJAX 填充列表
function callServer (input) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
//return the JSON object
console.log(xmlhttp.responseText);
var arr = JSON.parse(xmlhttp.responseText);
var parentDiv = document.getElementById('items');
parentDiv.innerHTML = "";
//fill the options in the document
for(var x = 0; x < arr.length; x++) {
var option = document.createElement('option');
option.value = arr[x][0];
option.innerHTML = arr[x][1];
//add each autocomplete option to the 'list'
option.addEventListener("click", function() {
console.log("Test");
});
parentDiv.appendChild(option);
};
}
}
xmlhttp.open("GET", "incl/search.php?value="+input.value, true);
xmlhttp.send();
}
However I can't get it to perform an action when I click on a selection in the datalist, for example if I type in "Ref F" and the item "Ref flowers" comes up, if I click on it I need to execute an event.
但是，当我单击数据列表中的一个选择时，我无法让它执行操作，例如，如果我输入“Ref F”并且出现“Ref 花”项，如果我单击它，我需要执行一个事件。
How can I do this?
我怎样才能做到这一点？
option.addEventListener("click", function() {
option.addEventListener("onclick", function() {
option.addEventListener("change", function() {
回答by chillichief
Sorry for digging up this question, but I've had a similar problem and have a solution, that should work for you, too.
很抱歉挖掘这个问题，但我遇到了类似的问题并且有一个解决方案，它也应该对你有用。
function onInput() {
var val = document.getElementById("input").value;
var opts = document.getElementById('dlist').childNodes;
for (var i = 0; i < opts.length; i++) {
if (opts[i].value === val) {
// An item was selected from the list!
// yourCallbackHere()
alert(opts[i].value);
break;
}
}
}<input type='text' oninput='onInput()' id='input' list='dlist' />
<datalist id='dlist'>
<option value='Value1'>Text1</option>
<option value='Value2'>Text2</option>
</datalist>This solution is derived from Stephan Mullers solution. It should work with a dynamically populated datalist as well.
此解源自 Stephan Mullers 解。它也应该与动态填充的数据列表一起使用。
Unfortunaltely there is no way to tell whether the user clicked on an item from the datalist or selected it by pressing the tab-key or typed the whole string by hand.
不幸的是，无法判断用户是单击数据列表中的项目还是通过按 Tab 键或手动键入整个字符串来选择它。
回答by Stephan Muller
Due to the lack of events available for <datalist>elements, there is no way to a selection from the suggestions other than watching the input's events (change, input, etc). Also see my answer here: Determine if an element was selected from HTML 5 datalist by pressing enter key
由于缺少可用于<datalist>元素的事件，因此除了观看input的事件（、 等）之外change，无法从建议中进行选择input。另请参阅我的答案：确定是否通过按 Enter 键从 HTML 5 数据列表中选择了一个元素
To check if a selection was picked from the list, you should compare each change to the available options. This means the event will also fire when a user enters an exact value manually, there is no way to stop this.
要检查是否从列表中选择了某个选项，您应该将每个更改与可用选项进行比较。这意味着当用户手动输入一个确切的值时，事件也会触发，没有办法阻止它。
document.querySelector('input[list="items"]').addEventListener('input', onInput);
function onInput(e) {
var input = e.target,
val = input.value;
list = input.getAttribute('list'),
options = document.getElementById(list).childNodes;
for(var i = 0; i < options.length; i++) {
if(options[i].innerText === val) {
// An item was selected from the list!
// yourCallbackHere()
alert('item selected: ' + val);
break;
}
}
}<input list="items" type="text" />
<datalist id="items">
<option>item 1</option>
<option>item 2</option>
</datalist>回答by Dinidiniz
Datalist don't support click listener and OnInput is very costly, checking everytime all the list if anything change.
Datalist 不支持单击侦听器并且 OnInput 非常昂贵，每次检查所有列表是否有任何变化。
What I did was using:
我所做的是使用：
document.querySelector('#inputName').addEventListener("focusout", onInput);
FocusOut will be triggered everytime a client click the input text and than click anywhere else. If they clicked the text, than clicked somewhere else I assume they put the value they wanted.
每次客户端单击输入文本而不是单击其他任何地方时，都会触发 FocusOut。如果他们点击文本，而不是点击其他地方，我认为他们输入了他们想要的值。
To check if the value is valid you do the same as the input:
要检查值是否有效，请执行与输入相同的操作：
function onInput(e) {
var val = document.querySelector('#inputName').value;
options = document.getElementById('datalist').childNodes;
for(var i = 0; i < options.length; i++) {
if(options[i].innerText === val) {
console.log(val);
break;
}
}
}
