автозаполнение середины селектора текстовой области javascript jquery - PullRequest
Новая
       7

автозаполнение середины селектора текстовой области javascript jquery

3 голосов
/ 30 августа 2011

Я видел, как иметь несколько автозаполнений в одной текстовой области, но я хотел бы получить что-то, что может выбирать термин в середине текстовой области, или, точнее, там, где курсор находится / был в текстовой области. Большинство решений, которые я видел, работают, только если пользователь работает над концом входной строки. Я хотел бы иметь что-то вроде возможности начать со строки: "@ Джордж наступил на #foot." затем вернитесь к середине строки и начните вводить, чтобы изменить это на это: "@ Джордж наступил на ногу @ Фредрика. По словам @Mary" и чтобы @Fredrick и @Mary отображались отдельно как опция автозаполнения.

Для конкретного использования, для которого я хочу эту функциональность, автозаполнение будет происходить в символьных строках, которые начинаются с символа «@» или «#», но они не обязательно будут первым или последним из данного символа.

Я использую javascript и jquery-ui для этой задачи. это для использования на мобильных устройствах, поэтому положение автозаполнения всегда будет только в нижней части текстовой области.

Ответы [ 2 ]

0 голосов
/ 01 сентября 2011

Я обнаружил, что могу делать практически все, что хотел, используя значение textarea.selectionStart, а затем циклически возвращаясь от этого индекса к началу тега, а затем снова используя selectionStart, чтобы найти конец тега.,условия, когда прекращать увеличивать / уменьшать индексы для начала и конца тега, могут быть немного сложными, для моего он проверяет, что он не выходит за начало / конец текста textarea, или для начала текста.пометьте "#", "@" или пробелом.для замены текста, когда вы сделали свой выбор, используется почти такой же процесс поиска текста, а затем заменяется текст выбранным тегом.и устанавливает курсор после замены текста, устанавливая курсор в начальную позицию смещения тега на длину выбранного тега.

0 голосов
/ 30 августа 2011

Я на самом деле реализую что-то очень похожее. Я посмотрел на Google+, и они используют contenteditable для Chrome и немного iframe гибрид для Firefox.

У меня был умеренный успех с rangy для получения текущего выбора.

Вещи, которые я еще не решил:

  • Правильно определить, когда пользователи начинают вводить @ или #, это сложнее, чем кажется, особенно если вы вводите HTML в область ввода.
  • Получение позиции x, y текущего выбора, чтобы вы могли позиционировать предложения автозаполнения. Предположительно, rangy уже может это сделать, но его пока нет в официальном выпуске (хотя есть рабочая демонстрация ).
...