HTML `datalist` с призрачным эффектом в Chrome для AndroidJavascript

Форум по Javascript
Ответить
Anonymous
 HTML `datalist` с призрачным эффектом в Chrome для Android

Сообщение Anonymous »

У меня есть HTML и JS. Это динамический имитирующий поиск с использованием AJAX. (скопировано с https://jsfiddle.net/repc36f1/8/)

Код: Выделить всё

let typingTimer;

function clearDatalist(datalistHTML) {
if (typeof(datalistHTML) !== 'object') {
return;
}

while (datalistHTML.firstChild) {
datalistHTML.removeChild(datalistHTML.lastChild);
}

console.log('cleared all datalist options.', document.getElementById('keywords').outerHTML);
}// #clearDatalist

function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}// delay

async function doKWSuggestion(event) {
const inputValue = event.target?.value;
const dataList = document.getElementById('keywords');
const optionsArray = ['apple', 'appear', 'google', 'youtube', 'amazon', 'amazing'];

clearDatalist(dataList);
await delay(1000);

optionsArray.forEach((item) => {
if (item.toLowerCase().includes(inputValue.toLowerCase())) {
const option = document.createElement('option');
option.value = item;
dataList.appendChild(option);
console.log('keyword found and setting the value to datalist options. (' + item + ')');
}
});
}// doKWSuggestion

function listenKeyup() {
const dataList = document.getElementById('keywords');

document.addEventListener('keyup', (event) => {
const ignoreKeys = [
'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
'Meta', 'Control', 'Shift', 'Alt', 'Escape',
'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
'Home', 'End', 'PageUp', 'PageDown', 'Insert', 'NumLock', 'CapsLock', 'ScrollLock',
];
const classesListArray = 'search'.split(/\s+/);
if (
ignoreKeys.some(currentKey => event.key === currentKey) ||
event.metaKey === true
) {
// if current key is one of ignore keys.
return;
}

clearDatalist(dataList);
clearTimeout(typingTimer);
typingTimer = setTimeout(() => {
doKWSuggestion(event);
}, 250);
});
}// listenKeyup

document.addEventListener('DOMContentLoaded', () => {
listenKeyup();
});

Код: Выделить всё


[list]
[*]Open in Chrome Android
[*]Type a. List of keywords appears.
[*]Type m. List of keywords that contain am
appears.
[*]Press backspace, wait for few seconds and type k. List of keywords still appears.
[/list]


  • Открыть в Chrome Android
  • Введите a. Появится список ключевых слов.
  • Введите m. Появится список ключевых слов, содержащих am.
  • Нажмите backspace, подождите несколько секунд и введите k. Список ключевых слов по-прежнему отображается.
При открытии в Chrome для Android и выполнении следующих действий список данных появляется и зависает со старым результатом. Иногда появляется побочный эффект (полупрозрачный со старым результатом).
Эта проблема возникала только в Chrome для Android. Не на ПК.
Как это исправить, предотвратить?
Я думаю, что это ошибка Google Chrome, но я не уверен. Однако я уже отправил отзыв в Google через меню Chrome.
Скриншоты проблемы (два больших изображения).

Подробнее здесь: https://stackoverflow.com/questions/798 ... or-android
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Javascript»