Как предотвратить дублирование значений для быстрого ввода в поле поиска в jQuery ⇐ Jquery

[Гость]

Я создал окно поиска и список, позволяющий пользователям искать свой город в этом списке. и я использовал событие keyup для перезагрузки списка городов и провинций, как вы видите в моем коде:

// Поиск городов $(document).on('keyup',"#provinceSearch", function(e){ е.preventDefault(); varпровинцияSearch = $("#provinceSearch").val(); // Затем скрываем следующий вариант поиска $(".submit").hide(); // Затем удаляем ранее загруженный список поиска $("#xcity").empty(); console.log("EV: 002"); // Отправляем запрос $.ajax({ URL: '/api/allcities', метод: 'POST', Тип данных: 'JSON', данные: { «Поиск провинции»: Поиск провинции, }, // В случае успеха успех: функция (данные) { // Сохраняем объект данных варпровинцияobj = JSON.parse(data.provinces); // Цикл городов jQuery.each(provinceobj, function(provincei,provincev){ console.log('SUC:002'); varпровинцияItem = ''+provincev.provinceName+''; $("#xcity").append(provinceItem); }); // Конец цикла городов }, // завершение успеха // Ошибка запуска ошибка: функция (данные) { console.log('ERR:002'); } // Конец неудачи }); // Завершаем отправку запроса }); // Окончание поиска городов Когда я медленно печатаю в поле поиска, проблем нет, но когда я печатаю быстро в поле поиска, я вижу элемент списка, который повторяется при каждом нажатии клавиши. как вы видите на изображениях ниже:

это обычный список городов при загрузке страницы

это обычный список городов при нормальной скорости ввода в поле поиска

это когда я быстро набираю текст в поле поиска, а в списке есть повторяющиеся элементы для каждой клавиши

Я пробовал использовать preventDefault, как видел на форумах, но это не решило проблему, кроме того, я использую функцию empty(), чтобы очистить список для каждого < strong>keyup, но это не работает, когда я печатаю быстро.