Това е моето решение:

function search() {

   //1. Select elements

   let searchElement = document.getElementsById('searchText');

 

   //2. Parse search text

   let searchText = searchElement.value;

 

   //3. Main logic

   //a) get all li element

   let allLiElements = Array.from(document.querySelectorAll('#towns li'));

 

   //b) clear results from previous search

   allLiElements.forEach(el => {

      el.style.fontWeight = 'normal';

      el.style.textDecoration = 'none';

   });

 

   //c) filter all li's which contain the search text

   //d) bold underline matching list

     

      let filterLi = allLiElements

      .filter(x => x.textContent.includes(searchText));

let mapped = filterLi

.forEach(x => {

   x.style.fontWeight = 'bold';

   x.style.textDecoration = 'underline';

});

 

   //e) show number of matches in result div

   let resultDiv = document.getElementsById('result');

      resultDiv.textContent = `${targetLi.length} matches found`;

}

4.Search in List

An HTML page holds a list of towns, a search box, and a [Search] button. Implement the search function to bold and underline the items from the list which include the text from the search box. Also, print the number of items the current search matches in the format `${matches} matches found`.

Note: It is necessary to clear the results of the previous search.

Write your JavaScript code in this file:

search.js

function search() {     // TODO }