为什么 'keydown' 检测我在 'datalist' 元素中选择 select 的时间（select 项目来自 jQuery 得到）

Question

我输入内容。输入每个字符后，将检测到按下事件。我使用 ajax GET from .json 文件获取元素并将其作为选项保存到数据列表。我希望 keydown 只在打字时触发。为什么，当我从数据列表中选择一个选项时 'keydown' 也被检测到？

Link 代码示例：https://playcode.io/453516?tabs=script.js,preview,console

例如：

我在输入
按键检测
在控制台中我有 'success' 和上市公司。
I select 列表中的一个元素
keydown select - 为什么？
项目列表不会消失

我的代码在这里：

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

const inputCompany = $('#company');

inputCompany.keydown('input', debounce(function() {

  //cleaning datalist
  let datalist = document.getElementById('listOfNames');
  while (datalist.lastChild) {
    datalist.removeChild(datalist.lastChild);
  }

  $.ajax({
    type: "GET",
    url: 'https://api.myjson.com/bins/1co0nd',
    data: "value=" + $(this).val().valueOf(),
    success: function(data) {
      console.log('success');
      console.log(data);

      // add elements to datalist
      data.companies.forEach(item => {
        let options = document.createElement('option');
        options.value = item;
        datalist.appendChild(options);
      });
    },
    error: function() {
      alert('error');
    }
  })
}, 250));

我希望在单击数据列表选项时不会检测到 'keydown'。

Answer 1

在那种情况下，我应该使用 .keypress，因为 .keypress 在插入实际字符而不是键盘键时触发。

正确代码：

const inputCompany = $('#company');

inputCompany.keypress('input',
    debounce(function () {

    //cleaning datalist
    let datalist = document.getElementById('listOfNames');
    while (datalist.lastChild) {
        datalist.removeChild(datalist.lastChild);
    }

    $.ajax({
        type: "GET",
        url: 'https://api.myjson.com/bins/1co0nd',
        data: "value=" + $(this).val().valueOf(),
        success: function (data) {
            console.log('success');
            console.log(data);

            // add elements to datalist
            data.companies.forEach(item => {
                let options = document.createElement('option');
                options.value = item;
                datalist.appendChild(options);
            });
        },
        error: function () {
            alert('error');
        }
    })

}, 250));

为什么 'keydown' 检测我在 'datalist' 元素中选择 select 的时间（select 项目来自 jQuery 得到）

Why 'keydown' detect when I chose select in 'datalist' element (select items from jQuery get)

html

javascript

jquery

keydown

html-datalist