Очередной эксперимент в поисках идеального средства для простого и быстрого написания кода.
<textarea>, да и веб-технологии в целом привлекают меня своей простотой, доступностью и возможностью сделать так, как нужно мне. Есть Zen Coding, который позволяет быстро и удобно работать с большим объёмом XHTML-данных, но для пущего удобства не хватает автодополнения кода. Поиск в интернете не дал никаких вменяемых результатов, поэтому решил написать свой:
Проверить автодополнение можно на тестовой странице. Попробуйте написать несколько английских слов, начинающихся на «a» (awesome, animal, amazing). Должно работать везде, включая IE6.
Само по себе автодополнение, по большому счёту, практически бесполезно: непонятно, в какой момент какие данные нужно показывать. Поэтому решение представляет из себя несколько отдельных классов, каждый из которых можно переопределить, расширить и дополнить. За основу была взята архитектура автодополнения для Eclipse IDE, поэтому ряд классов и методов называются одинаково.
TextViewer— по сути, обёртка для<textarea>. Основное предназначение: дать удобный интерфейс для получения содержимого элемента. Один из основных методов —getCharacterCoords(char_ix), возвращает координаты для определённого символа. Метод возвращает объект со свойствамиxиyв пикселях, отсчёт идёт от левого верхнего угла<textarea>до левого верхнего угла нужного символа. МетодgetAbsoluteCharacterCoords(char_ix)возвращает то же самое, только относительноoffsetParent. Как не трудно догадаться, этот класс можно переписать для работы с content-editable блоком, и у вас будет автодополнение для более серьёзного редактора.ContentAssistProcessor— процессор, который высчитывает и предлагает список дополнений. По умолчанию ищет левую и правую границу английского слова (см. методisAllowedChar), ищет префикс (от левой границы слова до каретки) и предлагет по этому префиксу список дополнений.CompletionProposal— предложение для автодополнения. Главный метод —apply(), который применяет текущее предложение кTextViewer-объекту.ContentAssist— основной класс. Связывает между собойTextViewerиContentAssistProcessor, а также управляет всплывающим окном с подсказками.tx_utils— набор всяких DOM-утилит.
Для добавления поддержки автодополнения для <textarea> нужно инициализировать все эти классы:
var viewer = new TextViewer(document.getElementById('my-textarea'));
var processor = new ContentAssistProcessor(['word1', 'word2', 'word3']);
var content_assist = new ContentAssist(viewer, processor);
Для удобства есть класс BasicContentAssist, который делает всё то же самое для простых случаев (автодополнение по фиксированному словарю):
new BasicContentAssist(document.getElementById('my-textarea'), ['word1', 'word2', 'word3']);
У класса ContentAssistProcessor есть метод completitionProposalFactory, который должен возвращать объект класса CompletionProposal. Внешний вид попапа с предложениями был нагло позаимствован из редактора Espresso и полностью управляется через CSS. Окошко с предложениями можно вызвать принудительно по Ctrl+Space (не работает в Опере и немного тупит в Файерфоксе) либо по Alt+Space (хвала разработчикам Оперы: это тоже не работает, по крайней мере на Маке) и заменить текущее слово (зависит от позиции каретки).
Как видите, все классы можно удобно перекрывать, расширять и наследовать для достижения необходимого функционала. Баги, предложения и улучшения принимаются в комментариях и на странице проекта.
UPD: немного дотюнил процессор, теперь он находит границы слов вне зависимости от языка (то есть можно отдавать словарь с русскими словами), а также немного улучшил поддержку больших словарей.