javascript - 具有多个值和图标的 jQuery 自动填充(通过电子邮件发送到字段)

Question

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

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

欢迎任何想法!

谢谢你的时间， 阿尔伯特

Answer 1

首先你需要明白你想要做的不是一个默认情况下只有一个 html 元素(在本例中是一个输入)可用的功能。

我不会介绍很多技术细节，因为那意味着用勺子喂食，我更愿意为您指明正确的方向；希望你不介意，这里是:

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

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

一旦你在该输入上写了一些文本，自动完成应该会正常出现。但是，您需要一个 Hook ，这样当您注意力不集中或单击建议时，您的输入内容会转换为显示数据的 HTML 元素，您应该将其存储在 token 容器中。

输入框当然会一样，只是会往右移，例子:

完成此操作后，您应该能够根据需要添加任意数量的标签。然后当你需要获取数据时，只要遍历#tokens的内容，将它们作为数据的一部分。

希望对您有所帮助。