Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.03.2020, 16:34
Интересующийся
Отправить личное сообщение для maiskiykot Посмотреть профиль Найти все сообщения от maiskiykot
 
Регистрация: 11.09.2018
Сообщений: 17

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()
    }
 }
Ответить с цитированием
  #2 (permalink)  
Старый 23.03.2020, 18:34
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,053

Событие 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);
    });
});

Последний раз редактировалось Nexus, 23.03.2020 в 20:45.
Ответить с цитированием
  #3 (permalink)  
Старый 23.03.2020, 20:22
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,305

Nexus,
В строке 12 слово function надо.
Ответить с цитированием
  #4 (permalink)  
Старый 23.03.2020, 20:45
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,053

Rise, поправил, спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Замена строчной буквы на прописную при вводе Вових Общие вопросы Javascript 8 16.10.2017 19:52
Действие срабатывает при втором нажатии PHP Useless jQuery 1 06.06.2017 19:04
Активация кнопки при вводе верного ответа JukiPuki Общие вопросы Javascript 3 08.02.2010 22:12
Реализация скрипта. Изменение дерева при вводе каждой следующей буквы слова. WDha AJAX и COMET 0 03.11.2009 23:19
Проверка имени пользователя при вводе st1512 AJAX и COMET 1 07.09.2009 08:58