JSF layout and templating - html

Question

I have a templating search.xhtml page to accept user's search term on the page. After the user click the "Search!" button, the result will be displayed on the same page, below the search box, as shown in the simple code below.
search.xhtml:
<ui:define name="search">
<h:form id="wordForm">
<h:inputText id="word" value="#{wordController.word}" />
<h:commandButton id="search" value="Search!"
action="#{wordController.search}" />
</h:form>
</ui:define>
/*** From here to display the search results!!! ***/
<ui:define name="searchResult">
<h:outputText value="Search Results:"/>
<c:forEach items="#{wordController.wordInfoList}" var="wordInfo">
<h:outputText value="#{wordInfo.display}"
rendered="#{not empty wordInfo.display}" />
<ui:repeat value="#{wordInfo.relatedWords}" var="relatedInfo">
<h:outputLink value="index.xhtml">
<h:outputText value="#{relatedInfo}" />
<f:param name="relatedWord" value="#{relatedInfo}" />
</h:outputLink>
</ui:repeat>
</c:forEach>
/*Edit: Add a f:medatadata tag to accept the parameter "relatedWord" */
<f:metadata>
<f:viewParam id="related" name="relatedWord"
value="#{wordController.word}" />
<f:viewAction action="#{wordController.info()}" />
</f:metadata>
</ui:define>
The layout.xhtml inserts the search.xhtml to the page.
layout.xhtml:
<ui:fragment rendered="#{not empty wordController.word}">
<div id="searchResult">
<ui:insert name="searchResult">
</ui:insert>
</div>
</ui:fragment>
The problem is that, when the user visits the page, even before he clicks the "Search!" button, the search results will be always displayed together with teh search box, although the search result will be empty, except that the string "Search results: " is not empty.
How can I modify this so that before user performs a search, it will only display the search box. and only display the search results together with the search box after the user clicks the search button.
Thank you.