Hey fellow devs 👋! Welcome to today’s post. In the previous post, we learnt concepts of queries in AEM.
Building on that knowledge, we will now create a simple search bar that will take an input and queries the search term in the JCR repository for all the cq:Page nodes and under the path /content.
First we will create a simple component with one textfield and a button to execute the search. Then, we will write backend logic to search the term entered in the textfield using the QueryBuilder API.
Without further ado, let’s see how can we achieve this -
Navigate to CRX DE and under the path /apps/aemtutorials/components/content, create a new component with the following properties -
AEM Search Component
Rename the file search.jsp to search.html under /apps/aemtutorials/components/content/search and paste the following code in it -
This is a simple code where we are creating an HTML form with only two fields - textfield for keyword and a submit button.
Also, if you see in the action of our form, we are giving the path by which our Sling Servlet will be registered.
Plus, for styling and data passing, we will create client library with the relevant CSS and JS code.