修改select2实现163邮箱收件人输入的效果

公司需要这样的一个实现效果，但是自己水平还还不是很高。只能修改别人的代码来实现我的效果。

jquery 版本jquery-1.10.2.min.js+

https://github.com/ivaynberg/select2这个是没修改过的github地址。

http://pan.baidu.com/s/1qW6qMo0这个是我分享的

css文件和图片自己找位置

这个是实现下拉选中的效果

默认值有三个。

点击之后的效果

这个是原来的主要的功能

增加的功能有1：添加了点击按钮的事件

                        2：在搜索不到的情况下，输入英文的分号，自动把输入的内容变成按钮

项目中写的js参考

1：

function initReqList(){
			$('.reqListSelect').select2({
			 	multiple: true,
			 	selectedCilck:function(da){
					alert(da.id);
				},
				data:[]   //这个地方是放下拉列表初始化的数据
		 	});
		}

这个js下拉菜单没有任何值，全是自己输入不是搜索来的。

2：

function initSelect(){
			var projectLine = $("#projectLineId").find("option:selected").val();
			var params = {
			 		q: projectLine 
		 	};
			$.ajax({
				 url: "${appRoot}/requirement/getSelectReqMap.do",
				 type :'post',
				 async:false,
				 dataType: 'json',
				 data: params,
				 success: function (d) {
					 $('.select').select2({
						 	multiple: true,
						 	selectedCilck:function(da){
								alert(da.id);
							},
							data:d.option    //这个是初始化的json
					 });
				 }
			});
		}

其实select2支持ajax参数的，但是开始没弄出来（好像是因为别的错误）之后改了方案。

过了几天后找到了支持ajax的方法补上

$(function(){
		$("#auditName").select2({
			placeholder: "Search Users",
                        minimumInputLength: 2,
			multiple:true,
			ajax:{
				url:"/user/select.do",
				type:"post",
				dataType:"json",
				data:function(term,page){
					return {
						userName:term,
						page_limit:10
					};
				},
				results:function(data,page){
					return {results:data};
				}
			}
		});
	});

3：

这个是查看页面的带有默认值的

function initSelect(){
			var projectLine = $!project.projectLineId;
			var projectId = $("#id").val();
			var params = {
			 		q: projectLine,
			 		projectId:projectId
		 	};
			$.ajax({ 
				 url: "${appRoot}/requirement/getSelectAllReqMap.do",
				 type :'get',
				 async:false,
				 dataType: 'json',
				 data: params,
				 success: function (d) {
					 $('.select').select2({
						 	multiple: true,
						 	selectedCilck:function(da){
								alert(da.id);
							},
							data:d.option
					 });
					 $('.select').select2('data', d.selected);   //这个是默认值
					 $('.select').select2("readonly", true);     //因为是查看页面所以设置为readonly
				 }
			});
		}

4：因为带有默认值所以我的json格式为

{selected:[{id:0,text:第一个}],option:[{id:0,text:第一个},{id:1,text:第二个}]}