keyup срабатывает при удалении буквы а не при вводе
 

Подключил процедуру ajax. Все вроде работает нормально но... Вместо события по вводу букв в поле input получается что срабатывает только при удалении букв из поля. Как это починить/исправить?

window.addEventListener("load", function(){

    // Add a keyup event listener to our input element
    var name_input = document.querySelector('.name_input');
    name_input.addEventListener("keyup", function(event){hinter(event)});

    // create one global XHR object 
    // so we can abort old requests when a new one is make
    window.hinterXHR = new XMLHttpRequest();
});

// Autocomplete for form
function hinter(event) {

    // retireve the input element
    var input = event.target;

    // retrieve the datalist element
    var huge_list = document.getElementById('huge_list');

    // minimum number of characters before we start to generate suggestions
    var min_characters = 1;

    if (input.value.length < min_characters ) { 
        return;
    } else { 

        // abort any pending requests
        window.hinterXHR.abort();

        window.hinterXHR.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                // We're expecting a json response so we convert it to an object
                var response = JSON.parse(this.responseText); 

                // clear any previously loaded options in the datalist
                huge_list.innerHTML = "";

                response.forEach(function(item) {
                    // Create a new <option> element.
                    var option = document.createElement('option');
                    option.value = item;

                    // attach the option to the datalist element
                    huge_list.appendChild(option);
                });
            }
        };

        window.hinterXHR.open("GET", "query.php?query="+input.value+"&data="+Math.random(), true);
        window.hinterXHR.send()
    }
 }

Событие Keyup срабатывает при любом нажатии клавиши.

Попробуйте так:

window.addEventListener('load', function () {
    var MIN_CHARACTERS_NUMBER = 1;
    var DELAY = 300;// ms
    
    var nameInput = document.querySelector('.name_input'),
        hugeList = document.getElementById('huge_list');
        
    if (!nameInput || !hugeList) {
        return void console.error('Input or List not found');
    }
    
    var getRequestUrl = function (queryString) {
        return 'query.php?query=' + encodeURIComponent(queryString) + '&data=' + new Date();
    };
    
    var abortController,
        timer = 0;
    
    nameInput.addEventListener('input', function (event) {
        var value = this.value.trim();
        if (value.length < MIN_CHARACTERS_NUMBER) {
            return;
        }
        
        clearTimeout(timer);
        
        timer = setTimeout(function (queryString) {
            var requestUrl = getRequestUrl(queryString);
            
            if (abortController) {
                abortController.abort();
            }
            
            abortController = new AbortController();
            
            fetch(requestUrl, {
                signal: abortController.signal
            }).then(function (res) {
                return res.json();
            }).then(function (response) {
                abortController = undefined;
                
                hugeList.innerHTML = '';

                response.forEach(function (item) {
                    var listItem = document.createElement('option');
                    listItem.value = item;

                    hugeList.appendChild(listItem);
                });
            });
        }, DELAY, value);
    });
});

Rise, поправил, спасибо.