0

I have multiple accordion in single page and i am seraching the keword in the header of each accordion and want to highlight the search text but the following code is searching the keyword but not highlighting the text.

enter code here
var search = document.getElementById('searchAns'),
    accordions = document.querySelectorAll('.find-ans-card');
if (search) {
    // Apply search
    search.addEventListener('input', function () {
        var searchText = search.value.toLowerCase();
        Array.prototype.forEach.call(accordions, function (accordion) {
            if (accordion.innerText.toLowerCase().indexOf(searchText) >= 0) {
                accordion.style.display = 'block';
                //accordion.innerText.toLowerCase().indexOf(searchText).style.bgColor = 'black';
                
            }
            else {
                accordion.style.display = 'none';
            }
        });
    });
}
ajay
  • 53
  • 7
  • please update a working example , so that people can refer and help u out – KcH Feb 04 '21 at 06:39
  • Hi, thank you for the reply, this is the same thing i wanted jut wanted to highlight the text which search in the search box https://stackoverflow.com/questions/55324783/live-search-for-accordions-and-its-content – ajay Feb 04 '21 at 06:42
  • this would help you [link](https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript) – KcH Feb 04 '21 at 06:46
  • thank you for the help, but that is not working for me – ajay Feb 04 '21 at 07:00

0 Answers0