如何使用 js 和 css 实现 segmentfault 的标签输入效果？

Question

如图，想做一个类似于这样的标签输入 widget。以下的一些特性不知道怎么实现比较好，求有经验者指教。

1. 输入逗号或者分号后自动转成如上的标签效果。

2. 在标签后按消除键删除标签。

3. 限制最多输入 X 个标签。

还有一些高级的功能：

1. 输入标签的同时自动提示补全。

2. 自带提示。

可能描述的不是很清晰，具体特性可以打开一个问题发布页面实际体验。

Answer 1

一会吃完饭再来完善，刚撸了点demo地址

Answer 2

吃了午饭闲着也撸了一个——

demo

Answer 3

一贯的说思路，不贴代码。

先回答前面的1，2，3：
1，既然是输入，当然是用事件监听的方式，然后调用对应的判断函数；
2，原理基本同1；
3，还是同1

大致逻辑为：EventListener -> Function -> Operate DOM

其次是高级功能：
1，自动补全嘛有很多实现原理，可以异步的从服务器去取，也可以是首次渲染的时候缓存的本地。然后再查询出来。
2，原理同上

Answer 4

Input框监听键盘事件，输入变化时获取建议项（也可以不这样，换作回车添加项），然后input需要在外面加一个wrapper,灰框实现是应用在wrapper上的，input框宽度是变化的（宽度需要动态计算），input的宽度是已输入的标签，到行尾之间的宽度。你得意识到，当换行时，这需要做好处理。键盘事件也得处理delete,backspace,left,right,因为你可能需要通过键盘进行选择、删除。