Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
AEM 6.5 Search Component
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!
1 Accepted Solution
Correct answer by
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.
Arun Patidar
Hello @krist_wang
OOTB there is Quick Serach component. https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/quic...
It is used in WKND site as well
Please see if that helps.
Aanchal Sikka
Apologies, can you please elaborate "functions are the same as those on the pictures I upload"
Aanchal Sikka
Correct answer by
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.
Arun Patidar
@krist_wang Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.
Kautuk Sahni
