Показать предложения, когда пользователь вводит указанный символ в текстовом поле - PullRequest
Новая
       28

Показать предложения, когда пользователь вводит указанный символ в текстовом поле

0 голосов
/ 20 сентября 2018

Постановка задачи: используя javascript или Jquery, я хочу создать эту функциональность, в которой, если пользователь вводит указанный символ в текстовое поле, скажем, символ @, тогда значения массива должны отображаться в раскрывающемся списке.скажем, например, у меня есть массив со значениями: значения [гггг, гг]

когда пользователь вводит: abc @, затем после @ yyyy и yy должны появиться в раскрывающемся списке.Это как когда мы пишем символ @ в группе WhatsApp, он показывает список контактов этой группы.эта функциональность похожа на это.Кроме того, он отличается от обычного autosuggest, который показывает предложения, когда пользователь что-то вводит. Он отличается от функции автозаполнения jquery, где предложение отображается на основе ввода, представленного в текстовом поле.Здесь мы хотим, чтобы значения предопределенного списка были раскрыты, в тот момент, когда пользователь вводит символ @, а не на основе всего ввода в текстовом поле.

Эксперты, пожалуйста, помогите достичь этого.

1 Ответ

0 голосов
/ 20 сентября 2018

Базовая реализация: вы можете прикрепить прослушиватель к нажатию клавиши на входе / некотором конкретном элементе (также может быть contenteditable div), а затем вы можете проверить, нажал ли пользователь клавишу @ или нет. 

let element = document.getElementById('#some-element');

element.addEventListener('keydown', function(event) {
  const key = event.key;
  if (key === '@') {
    displaySuggestions();
  }
});

Как только пользователь нажимает клавишу '@', вы можете вызывать функции displaySuggestions().Это будет простой компонент, который вы можете создать, и когда пользователь нажимает на любое значение в предложении, вы можете вставить это значение в позицию каретки.

См. Следующее: Вставьте текств текстовое поле в позиции курсора (Javascript)

Существует множество библиотек, которые прекрасно предоставляют эту функциональность, вы можете проверить их.

Обновление:

Я создал небольшой проект для CodeSandbox, и вы можете нажать на следующую ссылку, чтобы проверить его:

Edit r79o38y75o

Это поможет с отправной точкой.

Я задокументировал код, объясняющий поведение и как это делается.В примере я использовал contenteditable div и определенно пример не оптимизирован для производительности, но многое можно сделать, чтобы улучшить его.

Я согласен, что есть множество ошибок, и все они могутразобраться, но через 20-30 минут это все, что я мог сделать.

Подводя итог : Вы можете черпать вдохновение из этого или продолжить редактирование этого илипридумайте лучшее ваше решение.У других людей могут быть отличные решения для этого, и я с нетерпением жду их.Пусть сила Javascript будет с вами.

Вот проект в действии:

Suggestions Component

...