select2的基本應用

AJAX:
返回的json
{"staffs":[{"id":" xx@163.com","name":"С°ÝÄê","email":" xx@163.com"},{"id":" xx@163.com","name":"Сӣ","email":"xx@163.com"}]}
------
JSP代碼:
<link href="<%=path%>/css/select2.css" rel="stylesheet" />
<script type="text/javascript" src="<%=path%>/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/select2.js"></script>


<script type="text/javascript">
// ÒÔÏÂΪselect2
    function movieFormatResult(staff) {
        return staff.name + ":" + staff.email+";";
    }
    function movieFormatSelection(staff,container) {
        return staff.name + ":" + staff.email+";";
    }
 
    $(document).ready(function() {
        $("#staffId").select2({
        	 tags:[],
             tokenSeparators: [",", " "],
             multiple:true,
        	allowClear: true,
            placeholder: "ËÑË÷ÐÕÃû",
            minimumInputLength: 2,
            ajax: {
            	type:"post",
			    url: "<%=path%>/hr/manager!searchEmail.do?status=1,2,3",
				dataType : 'json',
				quietMillis : 500,
				 
				data : function(term, page) {
					return {
						c : term, // Óû§ÊäÈëµÄ×Ö·û´® getParameter("q")
						page_limit : 10,
						apikey : "NoUse" // jspÒ³ÃæÖÐgetParameter("apikey")¿ÉÒԵõ½ 
					};
				},
				results : function(data,page) {
					return {
						results : data.staffs
					};
					
				}
			},
            createSearchChoice: function (term, staff) {
                t=term;
        	    if (t!==""&&staff.indexOf(t)<0) {
        	    	staff.push({id:t,name:t, email:t});
        	    }
            },
			formatResult : movieFormatResult,
			formatSelection : movieFormatSelection
		});
	});
</script>
參考網址:http://jsfiddle.net/ivaynberg/seck4/10/ http://jsfiddle.net/XcG7n/8/ http://jsfiddle.net/5HZB3/
相關文章
相關標籤/搜索