为什么当我在“数据列表”元素中选择选择时“ keydown”会检测到（从jQuery get中选择项）

Question

I type in the input. After each character entered the key down event is detected. I get the elements using ajax GET from .json file and save it to datalist as an option. I want keydown only to fire when typing. Why, when I take one option from datalist 'keydown' is also detect?

Link to code example: https://playcode.io/453516?tabs=script.js,preview,console

For example:

1. I type for example 'c' in input
2. keydown detect
3. in the console I have 'success' and list companies.
4. I select one element from the list
5. keydown select - WHY?
6. List of items don't disappear

My code is here:

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

I expect not to detect 'keydown' when I click on datalist option.

Answer 1

In that case I should use .keypress, because .keypress fires when an actual character is being inserted in, not keyboard key.

Correct code:

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