Adding a Search Bar to the Guestbook Portlet

Updating Your UI for Search
Step 1 of 2

Follow these steps to create the search bar UI for the Guestbook portlet:

1. In guestbook-web, open the file src/main/resources/META-INF/resources/guestbookwebportlet/view.jsp. Add a render URL near the top of the file, just after the scriptlet that gets the guestbookId from the request:

   <liferay-portlet:renderURL varImpl="searchURL">
       <portlet:param name="mvcPath" 
       value="/guestbookwebportlet/view_search.jsp" />
   </liferay-portlet:renderURL>
   

   The render URL points to /guestbookwebportlet/view_search.jsp (created in the next step). You construct the URL first because you must specify what happens when the user submits a search query.

2. Right after the render URL, create an AUI form that directs the user to the view_search.jsp page for viewing search results:

   <aui:form action="<%= searchURL %>" method="get" name="fm">
       <liferay-portlet:renderURLParams varImpl="searchURL" />
   
       <div class="search-form">
           <span class="aui-search-bar">
               <aui:input inlineField="<%= true %>" label="" 
               name="keywords" size="30" title="search-entries" type="text"
               />
   
               <aui:button type="submit" value="search" />
           </span>
       </div>
   </aui:form>
   

   The tag <liferay-portlet:renderURLParams varImpl="searchURL" /> includes the URL parameters of the searchURL as hidden input fields in the AUI form. This is important since the parameters of the searchURL are overwritten when the search query is submitted as a URL parameter.

   The body of the search form consists of a <div> containing a <span> that contains two elements: the search bar and the search button. The <aui:input> tag defines the search bar. Its name="keywords" attribute specifies the name of the URL parameter that contains the search query. The <aui:button> tag defines the search button. The type="submit" attribute specifies that when the button is clicked (or the Enter key is pressed), the AUI form is submitted. The value="search" attribute specifies the name that appears on the button.

That’s all there is to the search form! When the form is submitted, the mvcPath parameter pointing to the view_search.jsp is included in the URL along with the keywords parameter containing the search query. Now it’s time to create the view_search.jsp form to display the search results.