单击HTML5 datalist选项时执行操作

Question

我正在使用 <datalist>

<datalist id="items"></datalist>

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

但是,当我点击数据列表中的选项时,我无法执行操作,例如,如果我输入"Ref F"并且项目"Ref flowers"出现,如果我点击它我需要执行一个事件.

我怎样才能做到这一点？

option.addEventListener("click", function() {
option.addEventListener("onclick", function() {
option.addEventListener("change", function() {

Answer 1

很抱歉挖掘这个问题,但我遇到了类似的问题并找到了解决方案,这也应该适合你.

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>

该解决方案源自Stephan Mullers解决方案.它也应该与动态填充的数据列表一起使用.

不幸的是,无法判断用户是否从数据列表中点击了某个项目,或者通过按Tab键选择了该项目,或者是手动输入了整个字符串.

Answer 2

由于缺少可用于<datalist>元素的事件,除了观看input事件(,等)之外change,无法从建议中进行选择input.另请参阅我的答案:按Enter键确定是否从HTML 5 datalist中选择了一个元素

要检查是否从列表中选择了选择,您应该将每个更改与可用选项进行比较.这意味着当用户手动输入精确值时,事件也将触发,无法停止此操作.

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>

Answer 3

用 keydown

相反，其他的答案，它是可以检测一个选项是否被输入或从列表中选择。

键入和<datalist>点击都会触发输入的keydown侦听器，但只有键盘事件具有 key 属性。因此，如果 akeydown被触发而没有键属性，您就知道它是从列表中单击

演示：

const opts = document.getElementById('dlist').childNodes;
const dinput = document.getElementById('dinput');
let eventSource = null;
let value = '';

dinput.addEventListener('keydown', (e) => {
  eventSource = e.key ? 'input' : 'list';
});
dinput.addEventListener('input', (e) => {
  value = e.target.value;
  if (eventSource === 'list') {
    alert('CLICKED! ' + value);
  }
});

<input type="text" id="dinput" list="dlist" />

<datalist id="dlist">
  <option value="Value1">Text1</option>
  <option value="Value2">Text2</option>
</datalist>

请注意，如果单击的值已经在框中，它不会发出警报，但这可能是可取的。（这也可以通过使用将在keydown侦听器中切换的额外跟踪变量来添加。）

Answer 4

Datalist 实际上没有事件（并非所有浏览器），但您可以通过以下方式检测是否选择了 datalist 选项：

<input type="text" list="datalist" />

<datalist id="datalist">
  <option value="item 1" />
  <option value="item 2" />
</datalist>

window.addEventListener('input', function (e) {
 let event = e.inputType ? 'input' : 'option selected'
 console.log(event);
}, false);

演示