I have this JQuery script that allows you to search for a phrase out of a list of items and keeps any matches:
<script>
//search bar
function myFunction() {
var input, filter;
input = document.getElementsByClassName('colors-list');
filter = document.getElementById('color-search-pp').value.toUpperCase();
// Loop through all list items, and hide those who don't match the search query
for (i = 0; i < input.length; i++) {
var currentElem = input[i];
var currentElemChild = input[i].children[0]
if (currentElemChild.innerHTML.toUpperCase().indexOf(filter) > -1) {
currentElem.style.display = "";
} else {
currentElem.style.display = "none";
}
}
}
document.getElementById('color-search-pp').addEventListener('keyup', myFunction);
</script>
<input type="text" id="color-search-pp" onkeyup="myFunction()" placeholder="Start typing your color to narrow the search...">
<div>
<ul class="colors-li">
<li class="colors-list"><a class="colors-li-a">blue</a></li>
<li class="colors-list"><a class="colors-li-a">red</a></li>
<li class="colors-list"><a class="colors-li-a">green</a></li>
<li class="colors-list"><a class="colors-li-a">yellow</a></li>
</ul>
</div>
<style>
input#color-search-pp {
outline: none;
}
#color-search-pp {
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 3px solid #b1b1b1;
margin-bottom: 12px;
font-family: montserrat,sans-serif;
}
</style>
As it is, the script works great but I am having problems finding a way to do the following:
When the script has narrowed the list down to one last item and its an exact match, I am trying to create a 'success' message so it recognizes it as an exact match.
I want it to highlight the text in the narrowed down list in yellow so that the user can see the ongoing process of it being narrowed down.
I hope somebody can help me. Thank you in advance.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…