html - JQuery success message when last item found

Question

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:

1. 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.

2. 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.

Answer 1

you can try this.

//search bar
function myFunction() {
  const result = document.getElementById('result');
  const filter = document.getElementById('color-search-pp').value.toUpperCase();
  // Loop through all list items, and hide those who don't match the search query

  const matches = [...document.getElementsByClassName('colors-list')].filter(input => {
    const anchor = input.children[0];
    anchor.innerText = anchor.innerText; // remove the highlighting
    if (anchor.innerText.toUpperCase().indexOf(filter) !== -1) {
      input.style.display = "";
      return true;
    }
    input.style.display = "none";
    return false;
  });

  if (matches.length === 0) {
    result.innerText = "No colors found"; 
  } else if (matches.length === 1) {
    result.innerText = "Color found";
    const anchor = matches[0].children[0];
    const txt = anchor.innerText;

    const idx = txt.toUpperCase().indexOf(filter);
    anchor.innerHTML = `${txt.substring(0, idx)}<span class="highlight">${txt.substring(idx, idx + filter.length)}</span>${txt.substring(idx + filter.length)}`;
  } else {
    result.innerText = "";
  }
}

document.getElementById('color-search-pp').addEventListener('keyup', myFunction);

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;
}

.highlight {
  background-color: yellow;
}

<input type="text" id="color-search-pp" placeholder="Start typing your color to narrow the search...">
<span id="result"></span>

<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>