angular typeahead/autocomplete 内容可编辑

Question

基本上，我的客户要求我做的事情类似于在 Facebook/youtube 评论中标记朋友。

必须以@
一个提示列表的弹出窗口，选择后，该值将追加回原来的 contenteditable

我试过了 https://angular-ui.github.io/bootstrap/ 和 ngTagsInput ，它们很接近但还不够......谢谢

Answer 1

您正在为标签构建自动完成功能。如果您打算重用它，则需要编写一个自定义指令。如果没有，那么您可以在控制器内部进行混乱的实现。

您需要使正在编辑的 html 元素看起来像这样：

<div ng-model="newtag" ng-change="tagchanged()" ng-bind="newtag"></div>

ng-change 会在更改时触发，因此您的函数需要进行去抖动（等待一段时间）才能等到用户完成输入。您可以使用 500 毫秒的 setTimeout 来完成此操作。如果它在该时间段内发生变化，则终止超时。但如果没有，请执行 api 调用以获取潜在标签列表并将它们显示在字段下方的列表中。您需要 css 的结果让它们与搜索字段对齐并悬停在页面的其余部分上方。

Answer 2

我敢打赌这就是您要找的 http://angular-ui.github.io/ui-mention/example/。我不得不承认我花了好几天才找到它（来自 google）

祝你好运

angular typeahead/autocomplete 内容可编辑

angular typeahead/autocomplete for contenteditable

typeahead

angularjs