My HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<!--<script src="src/jquery-3.2.1.min.js"></script>-->
<script src="src/search.js"></script>
</head>
<body>
<ul id="towns">
<li>Sofia</li>
<li>Pleven</li>
<li>Varna</li>
<li>Plovdiv</li>
</ul>
<input type="text" id="searchText"/>
<button onclick="search()">Search the towns</button>
<div id="result"></div>
</body>
</html>
JavaScript code + jQuery code:
function search() {
let searchText = $('#searchText').val();
let matches = 0;
$("#towns li").each((index, item) => {
if (item.textContent.includes(searchText)) {
$(item).css("font-weight", "bold");
matches++;
} else
$(item).css("font-weight", "");
});
$("#result").text(matches + " matches found.");
$("#searchText").val("");
}
Account
