Terminal autocomplete component

[katrinio]

Идея

Заменить стандартный браузерный datalist на собственный компонент автодополнения в стиле Echo.

Цель — сделать единый механизм автодополнения, который в будущем сможет использоваться во всём приложении, а не только для тегов.

Мотивация

Нативный datalist имеет ряд ограничений:

• отличается между браузерами;
• неудобен на мобильных устройствах;
• не поддаётся стилизации;
• не соответствует визуальному стилю Echo.

Собственный компонент позволит сделать поведение одинаковым на всех устройствах и сохранить терминальную эстетику.

Первая реализация

Использовать компонент при вводе тегов.

Во время редактирования последнего тега показывать выпадающий список подходящих существующих тегов.

Например:

PROJECTS JO

↓

JOY
JOURNAL
JOB

Возможности

• фильтрация по введённому префиксу;
• выбор мышью;
• выбор тапом на телефоне;
• ↑ / ↓ для навигации;
• Enter или Tab для подстановки;
• Esc для закрытия списка;
• сохранение возможности создавать новый тег, если подходящего не существует.

Архитектура

Сделать компонент независимым от страницы тегов.

Например:

terminal-autocomplete.js

Компонент должен получать:

• текущую строку ввода;
• список вариантов;
• функцию выбора элемента.

Без привязки к конкретной модели данных.

Возможное использование в будущем

• теги;
• команды терминала;
• поиск;
• проекты;
• фильтрация;
• любые другие поля с автодополнением.

UX

Компонент должен ощущаться как автодополнение в современных IDE (JetBrains, VS Code), но визуально соответствовать стилю Echo:

• минималистичный;
• клавиатуро-ориентированный;
• быстрый;
• без тяжёлых UI-библиотек;
• с полной поддержкой мобильных устройств.