<strong>Result Div :</strong>
<div id="result" class="result ui-widget-content ui-corner-all">Submit form bellow.</div>
<strong>Topics Div :</strong>
<div id="topics" class="result ui-widget-content ui-corner-all"></div>

<s:form id="formAutocompleteJson" action="echo" theme="xhtml">
	<s:url id="jsonlanguages" action="jsonlanguages"/>
	<sj:autocompleter
		id="languages"
		name="echo"
		label="Handle a Array"
		href="%{jsonlanguages}"
		delay="50"
		loadMinimumCount="2"
		onChangeTopics="autocompleteChange"
		onFocusTopics="autocompleteFocus"
		onSelectTopics="autocompleteSelect"
	/>
	<s:url id="jsoncustomers" action="jsoncustomers"/>
	<sj:autocompleter
		id="customers"
		name="echo"
		label="Handle a List"
		href="%{jsoncustomers}"
		list="customers"
		listValue="name"
		listKey="id"
		listLabel="label"
		delay="50"
		loadMinimumCount="2"
		onChangeTopics="autocompleteChange"
		onFocusTopics="autocompleteFocus"
		onSelectTopics="autocompleteSelect"
		placeholder="Select a Customer"
	/>
	<sj:autocompleter
		id="customersMap"
		name="echo"
		label="Handle a Map"
		href="%{jsoncustomers}"
		list="customersMap"
		delay="50"
		loadMinimumCount="2"
		onChangeTopics="autocompleteChange"
		onFocusTopics="autocompleteFocus"
		onSelectTopics="autocompleteSelect"
	/>
	<sj:submit
		id="submitFormAutocompleteJson"
		targets="result"
		button="true"
		value="Submit"
		indicator="indicator"
		/>
</s:form>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
			
	  

          
$.subscribe('autocompleteChange', function(event, data) {
	var ui = event.originalEvent.ui;
	var message = ui.item.value;
	if(ui.item.key) {
		message = '( '+ ui.item.key +' ) '+message;
	}
	$('#topics').html('<b>'+message+'</b>');
});

$.subscribe('autocompleteFocus', function(event, data) {
	var ui = event.originalEvent.ui;
	var message = ui.item.value;
	if(ui.item.key) {
		message = '( '+ ui.item.key +' ) '+message;
	}
	$('#topics').html('<u>'+message+'</u>');
});

$.subscribe('autocompleteSelect', function(event, data) {
	var ui = event.originalEvent.ui;
	var message = ui.item.value;
	if(ui.item.key) {
		message = '( '+ ui.item.key +' ) '+message;
	}
	$('#topics').html('<i>'+message+'</i>');
});