AEM 6.5 Search Component

Question

I am a beginner in AEM, and I have a requirement.The search box can display search prompts based on the input. Click on a search prompt to display the search results below. How can I implement this? Can I inherit the search component of the core component? If so, how should I modify.

Best regards!

arunpatidar · Accepted Answer

Addition to what @aanchal-sikka suggested

To fill a search field from URL query parameters, you can use JavaScript to extract the query parameters from the URL and then populate the search field with the value of the desired parameter. Here's an example

//Example Search Field
    <input type="text" id="searchField" placeholder="Search">

//Javascript, function to autofill search field
  
        function fillSearchFieldFromURL() {
            // Get the current URL
            var currentURL = window.location.href;

            // Parse the URL to extract query parameters
            var urlParams = new URLSearchParams(currentURL);

            // Get the value of the 'keys' parameter
            var queryValue = urlParams.get('keys');

            // Fill the search field with the query value
            document.getElementById('searchField').value = queryValue;
        }
   
// Call the function on DOMContentLoaded
        document.addEventListener('DOMContentLoaded', fillSearchFieldFromURL);

Remember to adapt this code to your specific use case and HTML structure as needed.