javascript - 带有多个值和图标的 jQuery 自动填充（电子邮件到字段）

Question

我想使用 jQuery 自动完成字段在表单上创建一个收件人字段以进行查找。我希望这允许多个值。我已经知道如何做到这一点。

需要注意的是，当添加收件人并使用自动完成来执行查找时，收件人姓名应该有一个蓝色背景，旁边有一个删除图标 (x)，类似于 iPhone 上的“收件人”字段，或者该人在 Facebook 中查找（例如在 FB 中创建新组时）

欢迎任何想法！

谢谢你的时间，阿尔伯特

Answer 1

首先，您需要了解您想要做的不是默认情况下只有一个 html 元素（在本例中为输入）可用的功能。

我不会进入很多技术细节，因为这意味着喂汤，我更愿意为你指出正确的方向；希望你不介意，这里是：

首先，您需要有一个看起来像块的容器，比如说一个 div。在其中，您将拥有输入字段，该字段应仅占容器的一部分，如下所示：

<div id="tag_editor">
  <span id="tokens"><!-- js stores tags here --></span>
  <input type="text" id="tag_editor_input">
</div>

在该输入上写一些文本后，自动完成应该会正常显示。但是，您需要一个钩子，以便当您不专注或单击建议时，您的输入内容将转换为显示数据的 HTML 元素，您应该将其存储在令牌容器中。

当然输入框是一样的，但是会向右移动，例如：

完成此操作后，您应该能够根据需要添加尽可能多的标签。然后当你需要获取数据时，只需遍历其中的内容，#tokens并将它们作为数据的一部分使用。

希望能帮助到你。