select2 实时查询(jeesite封装tag)

  |   0 评论   |   0 浏览
<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!-- 请不要使用带有特殊符号作为id值,未转义会导致选择器失败 -->
<%@ attribute name="id" type="java.lang.String" required="true" description="输入框id"%>
<%@ attribute name="name" type="java.lang.String" required="false" description="输入框name,表单提交使用"%>
<%@ attribute name="value" type="java.lang.String" required="false" description="输入框值"%>
<%@ attribute name="cssClass" type="java.lang.String" required="false" description="输入框样式"%>
<input type="hidden" id="${id}" name="${name}" value="${value}" class="${cssClass }" />
<script>
$(document).ready(function() {
	//商户select异步加载
	$("#${id}").select2({
	    placeholder:"选择商户",
	    minimumInputLength:1,
	  	ajax:{ // instead of writing the function to execute the request we use Select2's convenient helper
		        url: "${ctx}/biz/merchant/ajaxList",
		        type:'post',
		        dataType: 'json',
		        data: function (term, page) {
		            return {
		                q: term, // search term
		            };
		        },
		        results: function (data, page) { // parse the results into the format expected by Select2.
		            // since we are using custom formatting functions we do not need to alter the remote JSON data
		            return { results: data };
		        }
	    },
	    initSelection:function(element, callback) {
	        var id = $(element).val();
	        if (id !== "") {
	            $.ajax("${ctx}/biz/merchant/ajaxGet?id=" + id, {
	                dataType: "json"
	            }).done(function(data) { callback(data); });
	        }
	    },
	    formatResult: merchantFormatResult, // omitted for brevity, see the source of this page
	    formatSelection: merchantFormatSelection,  // omitted for brevity, see the source of this page
	    dropdownCssClass:"bigdrop", // apply css that makes the dropdown taller
	    escapeMarkup:function (m) { return m; } // we do not want to escape markup since we are displaying html in results
	});

	function merchantFormatResult(merchant) {
	        var markup = "<table class='result'><tr>";
	        markup += "<td>"+merchant.name+"</td></tr></table>"
	        return markup;
	}

	function merchantFormatSelection(merchant) {
	   return merchant.name;
	}
});
</script>