Jquery实现类似选择邮箱发送人效果

当我们用到多选人员进行数据流转时，为了更好的用户交互，我们可以用类似选择邮箱收件人的方式进行数据展示。
效果图：

 

 

当我们从弹出页面选择若干人之后，选择好的人员会显示在文本框中，鼠标悬停则出现x号。点击删除，并将隐藏的员工ID删除。提供重复过滤，人员追加。
员工多选弹出就不贴代码了。数据来源随意。
//JS代码
//将选择的员工ID传入，通过AJAX获取JSON格式的用户ID，用户Name
function AddSessionIn(ids) {
// my.viewModel.AddProduct(ids);
var heuser = ids;
// $("#hidUser").val(ids);
$.ajax({
url: "../Controllers/OpenPublic/openUser.ashx?ActionType=selectHeTreeUser",
data: {
"uid": heuser
},
success: function (data) {
var dataJson = $.parseJSON(data);
for (var o in dataJson.data) {
selected(dataJson.data[o][0], dataJson.data[o][1]);
}
// $("#txtUserS").val(data);
}
});
}
function selected(name, code) {
var ids = $("#code").val();
if (ids.indexOf(code) == -1) { //没有找到匹配的id
$("#in1").append("<div style='width:auto;float:left;' id=" + code + " onmousemove=javascript:mouseoverUser(\"" + code + "\")>" + name + "<a href=# id=\"a" + code + "\" onmouseout=javascript:mouseoutUser(\"" + code + "\"); onclick=javascript:deleteCode(\"" + code + "\");></a>; </div>");
$("#" + code).hover(function () {
$(this).css("background", "#e0f0e9");
document.getElementById("a" + code).innerHTML = "<span class=\"fa fa-times\"></span>";
}, function () {
$(this).css("background", "#f4f4f4");
document.getElementById("a" + code).innerHTML = "";
});
//添加隐藏域的值
ids += code + ",";
$("#code").val(ids);
}
}
//删除方法
function deleteCode(code) {
var ids = $("#code").val();
$("#code").val(ids.replace(code + ",", ""));
$("#" + code).remove();
}
HTML代码
<div class="input-group out1" id="out1" >
<div class="in1" id="in1" exp="" >
</div>
<input type="text" id="code" name="code" runat="server" clientidmode="Static" style="display:none"/>
<asp:Label ID="lblUser" ClientIDMode="Static" runat="server" Style="display: none" ForeColor="Red"> <%=GetPublicString("Required") %></asp:Label>
</div>
<span class="input-group-addon" style="float:left"><a href="#" onclick="openUser(1); return false;"><i
class="fa fa-user"></i></a></span>