Js live Search pattern

Question

function livesearch() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName('li');

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

#myInput {
    background-image: url('/css/searchicon.png'); /* Add a search icon to input */
    background-position: 10px 12px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 100%; /* Full-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 12px 40px; /* Add some padding */
    border: 1px solid #ddd; /* Add a grey border */
    margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
    /* Remove default list styling */
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#myUL li a {
    border: 1px solid #ddd; /* Add a border to all links */
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6; /* Grey background color */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove default text underline */
    font-size: 18px; /* Increase the font-size */
    color: black; /* Add a black text color */
    display: block; /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
    background-color: #eee; /* Add a hover effect to all links, except for headers */
}

    <input type="text" id="myInput" onkeyup="livesearch()" placeholder="Search for names..">

    <ul id="myUL">
        <li><a href="#">name</a></li>
        <li><a href="#">two word</a></li>
        <li><a href="#">three words name</a></li>
        <li><a href="#">four words name example</a></li>
    </ul>

Hi all I'm using a live search with html css and js everything is allright when I search for the exact pattern But i'm looking to something that showes irregular searches. For instance when someone searches for "four name" or "words example" the result showing "four words name example".Can anyone help me make this search pattern?

Answer 1

I hope this helps you!

function livesearch() {
  // Declare variables
  var input, filter, ul, li, a, i;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  filter = filter.split(' ');
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName('li');

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    var sw = 1;
    a = li[i].getElementsByTagName("a")[0];
    for (var jj = 0; jj < filter.length; jj++) {
      if (a.innerHTML.toUpperCase().indexOf(filter[jj]) == -1) {
        sw = 0;
        break;
      }
    }
    if (sw) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

#myInput {
  background-image: url('/css/searchicon.png');
  /* Add a search icon to input */
  background-position: 10px 12px;
  /* Position the search icon */
  background-repeat: no-repeat;
  /* Do not repeat the icon image */
  width: 100%;
  /* Full-width */
  font-size: 16px;
  /* Increase font-size */
  padding: 12px 20px 12px 40px;
  /* Add some padding */
  border: 1px solid #ddd;
  /* Add a grey border */
  margin-bottom: 12px;
  /* Add some space below the input */
}

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  /* Add a border to all links */
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  /* Grey background color */
  padding: 12px;
  /* Add some padding */
  text-decoration: none;
  /* Remove default text underline */
  font-size: 18px;
  /* Increase the font-size */
  color: black;
  /* Add a black text color */
  display: block;
  /* Make it into a block element to fill the whole list */
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
  /* Add a hover effect to all links, except for headers */
}

<input type="text" id="myInput" onkeyup="livesearch()" placeholder="Search for names..">

<ul id="myUL">
  <li><a href="#">name</a></li>
  <li><a href="#">two word</a></li>
  <li><a href="#">three words name</a></li>
  <li><a href="#">four words name example</a></li>
</ul>