基于jQuery打造智能的人员选择输入框

核心提示： 最后是公开一个函数来方便外面调用additem，如我有一个弹出界面可以一次选择n个人回来，基于jQuery打造智能的人员选择输入框(6)，那么就可以调用这个函数了1.$.fn.addboxitem=function(op){2.$(this).trigger("addboxitem&q

最后是公开一个函数来方便外面调用additem，如我有一个弹出界面可以一次选择n个人回来，那么就可以调用这个函数了

1.$.fn.addboxitem　=　function(op)　{
2.　　　　　　　　$(this).trigger("addboxitem",　[op]);//想到我在之前注册的自定义事件了吗?
3.　　　　};

至此我们的控件其实已经分析完成了，但是为了让大家更好的理解这个控件，我把对应的服务器端代码也顺便写写因为Demo是Asp.NET MVC的，那么就以asp.net mvc 为例来讲吧先来看看Demo的调用代码，urlOrData是个Action，additem和removeitem分别处理将选中的人员添加到指定的隐藏域或从中删除，以便表单提交。

01.$(document).ready(function()　{
02.　　　　　　　　　　　　$("#usbox").usbox({
03.　　　　　　　　　　　　　　　　width:　430,
04.　　　　　　　　　　　　　　　　urlOrData:"<%=Url.Action("QueryComplete")%>",
05.　　　　　　　　　　　　　　　　addItem:　function(data)　{
06.　　　　　　　　　　　　　　　　　　　　var　t　=　$("#hdtext").val();
07.　　　　　　　　　　　　　　　　　　　　var　v　=　$("#hdvalue").val();
08.　　　　　　　　　　　　　　　　　　　　var　t1　=　t　!=　""　?　t.split(",")　:　[];
09.　　　　　　　　　　　　　　　　　　　　var　v1　=　v　!=　""　?　v.split(",")　:　[];
10.　　　　　　　　　　　　　　　　　　　　t1.push(data[0]);
11.　　　　　　　　　　　　　　　　　　　　v1.push(data[2]);
12.　　　　　　　　　　　　　　　　　　　　$("#hdtext").val(t1.join(","));
13.　　　　　　　　　　　　　　　　　　　　$("#hdvalue").val(v1.join(","));
14.　　　　　　　　　　　　　　　　},
15.　　　　　　　　　　　　　　　　removeItem:　function(data)　{
16.　　　　　　　　　　　　　　　　　　　　var　t　=　$("#hdtext").val();
17.　　　　　　　　　　　　　　　　　　　　var　v　=　$("#hdvalue").val();
18.　　　　　　　　　　　　　　　　　　　　var　t1　=　t.split(",");
19.　　　　　　　　　　　　　　　　　　　　var　v1　=　v.split(",");
20.　　　　　　　　　　　　　　　　　　　　var　index　=　-1;
21.　　　　　　　　　　　　　　　　　　　　for　(var　i　=　v1.length　-　1;　i　>=　0;　i--)　{
22.　　　　　　　　　　　　　　　　　　　　　　　　if　(data[2]　==　v1[i])　{
23.　　　　　　　　　　　　　　　　　　　　　　　　　　　　index　=　i;
24.　　　　　　　　　　　　　　　　　　　　　　　　　　　　break;
25.　　　　　　　　　　　　　　　　　　　　　　　　}
26.　　　　　　　　　　　　　　　　　　　　}
27.　　　　　　　　　　　　　　　　　　　　if　(index　>　-1)　{
28.　　　　　　　　　　　　　　　　　　　　　　　　t1.splice(index,　1);
29.　　　　　　　　　　　　　　　　　　　　　　　　v1.splice(index,　1);
30.　　　　　　　　　　　　　　　　　　　　　　　　$("#hdtext").val(t1.join(","));
31.　　　　　　　　　　　　　　　　　　　　　　　　$("#hdvalue").val(v1.join(","));
32.　　　　　　　　　　　　　　　　　　　　}
33.　
34.　　　　　　　　　　　　　　　　}
35.　　　　　　　　　　　　});
36.　　　　　　　　　　　　var　tempdata　=　["假正经哥哥",　"xuanye","001"];　　　　　　　　
37.　　　　　　　　　　　　$("#usbox").addboxitem(tempdata);
38.　　　　　　　　});