Создание приложения для чата с angular, попытка сделать так, чтобы при вводе символа @ над символом @ появлялся список пользователей групп.

Question

Допустим, у меня есть следующие данные:

<input 
class="chatInput form-control" 
[(ngModel)]="message" 
(keydown)="handleSubmit($event)"
/>

, а также список членов группы с атрибутами имени пользователя.

Я хочу сделать его таким похожим на groupme, каждый раз, когда я набираю символ @ , список групп пользователей всплывает вверху, где бы ни был @. Я могу определить, КОГДА есть символ @, набранный с (ngModelChange), однако я не знаю, как создать всплывающее окно в точном месте символа @. Есть идеи?

Answer 1

Я бы не рекомендовал go с нуля из-за обработки браузера, управления размером экрана с клавиатуры, debounceTime и т.д. c.

Почему бы вам не попробовать это с материалом angular. Этот Stackblitz может вам помочь: https://stackblitz.com/edit/angular-4tkhtg-idm9tv?file=src / app / autocomplete-filter-example.ts

Answer 2

Вы можете что-то вроде:

<input 
class="chatInput form-control" 
[(ngModel)]="message" 
(keydown)="handleSubmit($event)"
/>
<ul class="list-group" ng-model="users" ng-hide="!users">
    <li class="list-group-item" ng-repeat="user in users track by $index">{{user.name}}</li>
</ul>

Это покажет список пользователей чуть ниже вашего ввода, например:

Надеюсь, это вам поможет.