[#macro combobox id="" name=id hasDownArrow="true" textField="DATAVALUE" valueField="DATAKEY"  model="remote" source=""
	textValues="" idValues="" editable="true" style="width:100px;" url=""  multiple="false" 
	attr={}
]


[#if multiple=="false"]
<script type="text/javascript">
    $(document).ready(function() {
      	$('#_${id}').combobox({
				textField : '${textField}',
				valueField : '${valueField}',
				multiple:false,
				[#if model == "remote"]
					mode : 'remote',
					url : '${url}',
				[#else]
					data:${source},
				[/#if]
				hasDownArrow:${hasDownArrow},
				[#list attr?keys as key]
					${key} : ${attr[key]},
				[/#list]
				editable:${editable},
				onSelect:function(item){
					var id = $("#_${id}").combobox("getValue");
					var text = $("#_${id}").combobox("getText");
					document.getElementById("${id}_TEXT").value = text; 
					document.getElementById("${id}").value = id;
					try{on${id}Changed(id,text);}catch(e){}
				},
				onChange:function(newValue, oldValue){
					document.getElementById("${id}_TEXT").value = "";
					document.getElementById("${id}").value = "";  
					var text = $("#_${id}").combobox("getText");
					try{on${id}Changed("",text);}catch(e){}
				}
				  
		});
		[#if idValues !="" && textValues == ""]
			$('#_${id}').combobox("select",'${idValues}');
		[/#if]
		});
    </script>
    <input type="text" style="${style}" value="${textValues}" name="_${name}" id="_${id}"/>
    <input type="hidden" value="${textValues}" name="${name}_TEXT" id="${id}_TEXT" />
    <input type="hidden" value="${idValues}" name="${name}" id="${id}" />  
[/#if]
[#if multiple=="true"]

<script type="text/javascript">
    $(document).ready(function() {
      	$('#_${id}').combobox({
				textField : '${textField}',
				valueField : '${valueField}',
				multiple:true,
				[#if model == "remote"]
					mode : 'remote',
					url : '${url}',
				[#else]
					data:${source},
				[/#if]
				editable:false,
				onUnselect:function(item){
					var ids = $("#_${id}").combobox("getValues");
					var text = $("#_${id}").combobox("getText");
					document.getElementById("${id}_TEXT").value = text;
					$("#${id}").val(ids);
					try{on${id}Changed(ids,text);}catch(e){}
				},
				onSelect:function(item){
					var ids = $("#_${id}").combobox("getValues");
					var text = $("#_${id}").combobox("getText");
					$("#${id}").val(ids);
					document.getElementById("${id}_TEXT").value = text;
					try{on${id}Changed(ids,text);}catch(e){}
				}
		});
		
		[#if idValues!=""]
			var ids = '${idValues}';
			var arrIDS = ids.split(",");
			$('#_${id}').combobox("setValues",arrIDS);
		[/#if]
		[#if textValues !="" ]
			$('#_${id}').combobox("setText",'${textValues}');
		[/#if]
		});
    </script>
    <input type="text" style="${style}" value="" name="_${name}" id="_${id}"/>
    <input type="hidden" value="${textValues}" name="${name}_TEXT" id="${id}_TEXT" />
    <input type="hidden" value="${idValues}" name="${name}" id="${id}"/>
[/#if]
[/#macro]