Вот чего я хочу добиться:
При вводе термина (например, «Mar») в поле ввода выполняется запрос AJAX, который возвращает HTML-код с предложениями автозаполнения, представленными Thymeleaf (например, <ul> <li> Marvel </li> </ul>). Теперь огромная проблема, как я могу отобразить эти предложения в виде списка в поле ввода?
Я уже пробовал следующие решения:
- Использование
datalist в сочетании с option из HTML. Основные недостатки: он не совместим с Safari, а option не работает с JavaScript onClick()
- Использование стиля автозаполнения MDB Bootstrap (https://mdbootstrap.com/docs/jquery/forms/autocomplete/). Основной недостаток: клавиши со стрелками не могут использоваться для переключения между предложениями (см. Автозаполнение Google)
Таким образом, решение должно включать следующее:
- Каждый браузер должен поддерживать его.
- Я могу использовать клавиши со стрелками для перемещения вверх и вниз.
- При нажатии на элемент должен быть запущен «реальный поиск» (либо с помощью JavaScript, либо просто с помощью
<a href="">...</a>
У кого-нибудь есть идея обойти это?