Question

我有一个类似的文本区域。

<textarea [(ngModel)]="message" id="commentBox" placeholder="Add your comment here..."></textarea>

我有一个列表，可以像这样从外部api吸引用户。

<div class="mention-container">
   <ul>
      <li *ngFor="let user of users">
        user.name
      </li>
   </ul>
</div>

和users数组是这样的。

users = [
    {
        name: steve,
        id: 47 
    },
    {
        name: james,
        id: 41
    },
    {
        name: guy,
        id: 44 
    },
    {
        name: troy,
        id: 32 
    }
]

现在，我已经创建了一个自定义的@mention系统，当用户在文本区域中输入@时，我会在其中侦听该消息，然后显示用户列表

这是我的职责

listenForMention(): void {
const textarea = document.querySelector('textarea');
const mentionSelect = <HTMLElement>document.querySelector('.mention-container');
const atKeyCode = 50;
const spaceCharacter = ' ';
const shiftKeyCode = 16;
textarea.addEventListener('keyup', (event) => {
  if (event.keyCode === shiftKeyCode) {
    return; // ignore shift key presses
  }
  if (
     // '@' is first character in textarea OR
    event.keyCode === atKeyCode &&
    // the character before the '@' is a space
    (textarea.selectionStart === 1 || textarea.value[textarea.selectionStart - 2] === spaceCharacter)
  ) {
    // Show mention container
    mentionSelect.style.display = 'block';
  }
});

}

所以它的作用是侦听@符号，然后显示用户的完整列表，但是我想要做的是在用户键入@之后开始搜索列表中的用户并从数组中删除用户，因此，如果我输入st，我只希望在列表中显示steve，

现在，我已经找到了一些类似角度的搜索过滤器插件。 ng2-filter-search，但是它们在输入中使用ngModel和管道。.如何在文本区域中创建相似的内容，并且只有在用户键入@symbol之后然后在用户选择了希望的用户后将其关闭选择。从我自己的研究来看，管道似乎是执行此操作的最佳方法，但是我无法弄清楚如何仅在输入@

之后才能在文本区域中启动过滤器

编辑

我正在按照以下思路思考

pipe.ts

if(previous character === '@') {
   start filtering..
}

任何帮助将不胜感激！

谢谢！

从textarea搜索数组中的用户，但仅在输入特定字符Angular 5之后

0 个答案: