进行动态电子邮件输入

Question

我正在尝试制作此动态电子邮件输入字段，该字段在输入文本字段上使用自动完成功能，并将所选接收者放置在输入字段之前的跨度中。这两个容器被放置在一个 div 中。 div 模拟输入字段，而 span 和输入字段不可见。

我想让它看起来像大多数电子邮件软件一样流畅。使 div 框仅包含选定的接收器，并确保空输入字段不占用空间。

然而，目前的问题是输入字段需要空间并且通常最终占据了 div 的最后一行。如何避免这种情况？

这是容器：

<div class="message-userfield" ><span id="fake_to"></span><input type="text" name="auto" id="auto" /></div>

我尝试在不输入数据时使用 jquery 使输入字段的宽度变小，但是输入字段不会“跳”到跨度旁边。我怎样才能做到这一点。

$("#auto").focus(function(){
        $(this).css({width:'200px'});
    });

    $("#auto").blur(function(){
        $(this).css({width:'10px'});
    });

如何使这个输入字段看起来流畅和动态？帮助将不胜感激！

Answer 1

您是否正在寻找这样的东西：
http://jqueryui.com/demos/autocomplete/#multiple？