<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<f:subview id="suggestionBoxSubviewID">
	<h:messages showDetail="true" />
	<f:verbatim>Suggestion Box will suggest you Town's names if it's started with the "a" or "A" letter
		<br />
	</f:verbatim>
	<h:inputText value="#{sb.property}" id="text" />
	<rich:suggestionbox id="suggestionBoxId" eventsQueue="myEventsQueue" ajaxSingle="#{sb.ajaxSingle}" dir="#{sb.dir}"
		rendered="#{sb.rendered}" requestDelay="#{sb.requestDelay}" selfRendered="#{sb.selfRendered}" value="#{sb.value}" for="text"
		var="result" fetchValue="#{result.text}" suggestionAction="#{sb.autocomplete}" width="#{sb.width}" height="#{sb.height}"
		border="#{sb.border}" zindex="#{sb.zindex}" rules="#{sb.rules}" styleClass="styleClass" cellpadding="#{sb.cellpadding}"
		cellspacing="#{sb.cellspacing}" first="#{sb.first}" minChars="#{sb.minchars}" tokens="#{sb.tokens}" bgcolor="#{sb.bgColor}"
		focus="#{sb.forcus}" title="#{result.text}" summary="summary" shadowOpacity="#{sb.shadowOpacity}"
		shadowDepth="#{sb.shadowDepth}" selectValueClass="mousemove" frequency="#{sb.frequency}" nothingLabel="nothingLabel work! "
		oncomplete="showEvent('oncompleteInputID', 'oncomplete work!')" onselect="showEvent('onselectInputID', 'onselect work!')">
		<h:column>
			<h:outputText value="#{result.city}" />
		</h:column>
		<h:column>
			<h:outputText value="#{result.contry}" />
		</h:column>
		<h:column>
			<h:outputText value="#{result.flag}" />
		</h:column>

	</rich:suggestionbox>
	<div style="position: relative; font-size: 50px; z-index: 2; color: navy">z-index</div>
</f:subview>
