<%@ 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" for="text" var="result"
			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="1" 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="print('oncompleteInputID', 'oncomplete work!')" 
			onselect="print('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>
