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

核心提示： formatItem函数是下拉中显示的格式 ，接着是生成HTML，基于jQuery打造智能的人员选择输入框(5)，注册事件，详细的步骤我已经注释到代码中了如下所示01.returnthis.each(function(e){02.varme=$(this);03.varid=me.attr(&q

formatItem函数是下拉中显示的格式 ，接着是生成HTML，注册事件，详细的步骤我已经注释到代码中了如下所示

01.return　this.each(function(e)　{
02.　　　　　　　　　　　　var　me　=　$(this);
03.　　　　　　　　　　　　var　id　=　me.attr("id");
04.　　　　　　　　　　　　//获取唯一的ID
05.　　　　　　　　　　　　if　(id　==　null　||　id　==　"")　{
06.　　　　　　　　　　　　　　　　id　=　"usbox_"　+　new　Date().getTime();
07.　　　　　　　　　　　　}
08.　　　　　　　　　　　　//input的容器
09.　　　　　　　　　　　　var　inc　=　$("<div　class='bbit-usbox-boxc'/>");
10.　　　　　　　　　　　　//生成一个input用于附加autocomplete控件
11.　　　　　　　　　　　　var　input　=　$("<input　type='text'　id='"　+　id　+　"_inbox'　class='bbit-usbox-box'　/>").appendTo(inc);
12.　　　　　　　　　　　　//设置样式，并把input添加到对象中
13.　　　　　　　　　　　　me.addClass("bbit-usbox").width(def.width).append(inc);
14.　　　　　　　　　　　　//给input注册autocomplete功能，并设置回调函数
15.　　　　　　　　　　　　input.autocomplete(def.urlOrData,　co).result(function(event,　data,　formatted)　{
16.　　　　　　　　　　　　　　　　$(this).val("");//选择人员了则把输入框自己清空
17.　　　　　　　　　　　　　　　　additem(this,　data);//生成小方块
18.　　　　　　　　　　　　});
19.　　　　　　　　　　　　//注册一个自定义的事件，事件名addboxitem
20.　　　　　　　　　　　　me.bind("addboxitem",　function(e,data)　{　additem(input,data);　});
21.　　　　　　　　　　　　function　additem(inc,　data)　{
22.　　　　　　　　　　　　　　　　//小方块的模板替换成正确的值
23.　　　　　　　　　　　　　　　　var　tp　=　$(temp.replace(/\$\{([\w]+)\}/g,　function(s1,　s2)　{
24.　　　　　　　　　　　　　　　　　　　　if　(s2　==　"text")　{
25.　　　　　　　　　　　　　　　　　　　　　　　　return　data[0];　//返回的第一个值是displayname
26.　　　　　　　　　　　　　　　　　　　　}
27.　　　　　　　　　　　　　　　　　　　　else　if　(s2　==　"value")　{
28.　　　　　　　　　　　　　　　　　　　　　　　　return　data.join("|");//其他全部放到input[type=hidden]中
29.　　　　　　　　　　　　　　　　　　　　}
30.　　　　　　　　　　　　　　　　　　　　else　{
31.　　　　　　　　　　　　　　　　　　　　　　　　return　s1;
32.　　　　　　　　　　　　　　　　　　　　}
33.　　　　　　　　　　　　　　　　}));
34.　　　　　　　　　　　　　　　　//触发小放开的click事件，并且在内部查找删除按钮，注册点击事件，jQuery的链式哦
35.　　　　　　　　　　　　　　　　tp.click(def.clickItem).find("img.bbit-usbox-del").click(removeitem);
36.　　　　　　　　　　　　　　　　//把小方块放到input之前！
37.　　　　　　　　　　　　　　　　$(inc).parent().before(tp);
38.　　　　　　　　　　　　　　　　if　(def.addItem)　{　//如果additem存在则触发
39.　　　　　　　　　　　　　　　　　　　　def.addItem(data);
40.　　　　　　　　　　　　　　　　}
41.　　　　　　　　　　　　}
42.　　　　　　　　　　　　//移除的方法
43.　　　　　　　　　　　　function　removeitem()　{
44.　　　　　　　　　　　　　　　　var　p　=　$(this).prev()//获取input[type=hidden]，this指向delete　img
45.　　　　　　　　　　　　　　　　var　v　=　p.val();
46.　　　　　　　　　　　　　　　　var　arr　=　v.split("|");　//拼成一个数组
47.　　　　　　　　　　　　　　　　if　(def.removeItem)　{//触发移除函数
48.　　　　　　　　　　　　　　　　　　　　def.removeItem(arr);
49.　　　　　　　　　　　　　　　　}
50.　　　　　　　　　　　　　　　　//小方块移除本身
51.　　　　　　　　　　　　　　　　$(this).parent().parent().remove();//
52.　　　　　　　　　　　　}
53.　　　　　　　　　　　　return　me;
54.　　　　　　　　});