为什么当我在“datalist”元素中选择选择时检测到“keydown”（从 jQuery 中选择项目）答案

【问题标题】：Why 'keydown' detect when I chose select in 'datalist' element (select items from jQuery get)为什么当我在“datalist”元素中选择选择时检测到“keydown”（从 jQuery 中选择项目）
【发布时间】：2020-01-13 05:22:53
【问题描述】：

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

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

例如：

我在输入中输入例如“c”
按键检测
在控制台中我有“成功”并列出公司。
我从列表中选择一个元素
按键选择 - 为什么？
项目列表不会消失

我的代码在这里：

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

我希望在单击 datalist 选项时不会检测到“keydown”。

【问题讨论】：

代码链接不可访问，最好放在SO里
也许可以试试inputCompany.on('input',
.on 不会改变任何东西 :(
@Bhushan Kawadkar，SO 是什么？我在另一台计算机上检查了链接，它仍然有效。
SO = 堆栈溢出 ...共享的链接可能会丢失，这篇文章可能对其他人参考没有用处，因此通过编辑问题更好地发布您的代码

标签： javascript jquery html keydown html-datalist

【解决方案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));

【讨论】：