求指点收件人输入中输入多个联系人的思路
效果说明：
一个input[type=text]（至少看起来是这样的），其获得焦点后，接收输入，同时显示根据输入内容匹配的联系人
选中该联系人后，该联系人就被框起来，放入到这个input[type=text]（至少看起来是这样的）
然后可以继续输入
这样就在一个input[type=text]中输入了多个联系人
这个应该是目前邮件收件人地址输入的标配了吧？

刚才看了一下某邮箱的html结构
大概是：

<div class="R">

    <div class="js-component-emailhide nui-fGetout" id="_mail_emailhide_0_708">

        <input type="text" tabindex="-1" role="presentation">    <!-- 不知道这个是啥，看css，left=-10000px -->

    </div>

    <div unselectable="on" title="发给多人时地址请以分号隔开" class="js-component-emailcontainer nui-multiLineIpt nui-ipt" id="_mail_emailcontainer_0_681">

        <div unselectable="on" title="该地址格式有误，请双击修改" class="nui-editableAddr nui-addr nui-editableAddr-err">

            <!-- 已经输入的联系人数据 -->

            <em unselectable="on" class="nui-addr-email">red</em>

        </div>

        <div class="js-component-emailinput nui-editableAddr nui-editableAddr-edit nui-addr" id="_mail_emailinput_0_682">

            <!--  在多个联系人已经填入的情况下，点击A、B联系人之间，这个div就跟着跑过去了  -->

            <input type="text" aria-label="收件人地址输入框，请输入邮件地址，多人时地址请以分号隔开" tabindex="1" class="nui-editableAddr-ipt">

            <span class="nui-editableAddr-txt">W</span>

        </div>

        <div unselectable="on" title="testmail@mailserver.com" class="nui-editableAddr nui-addr nui-addr-hasAdd">

            <!-- 已经输入的联系人数据 -->

            <strong unselectable="on" class="nui-addr-name">testmail</strong>

            <em unselectable="on" class="nui-addr-email">testmail@mailserver.com</em>

            <a hidefocus="hidefocus" class="nui-addr-add" href="javascript:void(0)"><b class="nui-ico nui-ico-edit"></b></a>

        </div>

    </div>

</div>

输入数据，因为是在输入的指定div中的，所以检查这个指定div，就可以ajax到数据，
多个联系人，看起来直接in-line显示应该也没有问题，
但是我搞不清楚上面的这个结构是怎么获得鼠标/键盘的焦点的，因为它的实际的input[type=text]是被丢得老远的（left=-10000px），
不知道我有说清楚没有
求解答