Wix Search

<style>
#country-search {
  font-family: Helvetica;
}

*, *:before, *:after {
  box-sizing: border-box;
}

#country-search {
  width: 400px;
  display: block;
}

#country-search .entry input {
  width: 400px;
  font-size: 24px;
  padding: 12px;
  border-radius: 10px;
  border: 3px solid lightgray;
  margin: 0;
}

#country-search .entry input:focus {
  border: 3px solid lightblue;
  outline: none;
}

#countrySearchResultsContainer {
  width: 100%;
  border: 3px solid #eee;
  border-radius: 5px;
  display: none;
  background-color: rgba(220,220,220,0.4);
}

#countrySearchResults {
  margin: 0;
  width: 100%;
  padding: 0;
}

#countrySearchResults li {
  font-size: 24px;
  list-style-type: none;
  padding: 12px;
}
#countrySearchResults li:hover {
  background-color: #eee;
}
#countrySearchResults li:not(:last-child) {
  padding-bottom: 10px;
}
#countrySearchResults li a {
  text-decoration: none;
  color: black;
}
#countrySearchResults li a:visited {
  color: black;
}

</style>

<div id="country-search">
    <div class="entry">
        <input id="countrySearchInput" type="text" placeholder="Enter a country name" onkeyup="updateCountry()" onfocus="startSearch()" onblur="endSearch()" />
    </div>
    <div id="countrySearchResultsContainer">
        <ul id="countrySearchResults">
        </ul>
    </div>
</div>

<script>
var countries = [
  { name: 'Thailand', link: '' },
  { name: 'Bangkok', link: '' },
  { name: 'Tia Mario', link: '' }
];

var matchingCountries = [];

function updateCountry() {
  var searchTerm = document.getElementById('countrySearchInput').value;
  var resultsList = document.getElementById('countrySearchResults');
  
  resultsList.innerHTML = '';
  
  if(searchTerm.length === 0) return;
  
  var matchingCountries = countries.filter(function(country) {
    return country.name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1;
  });
  
  if(matchingCountries.length > 0) {
     var fewerCountries = matchingCountries.splice(0, Math.min(matchingCountries.length, 5));
  
      fewerCountries.forEach(function(country) {
          resultsList.innerHTML += "<li><a href='" + country.link + "'>" + country.name + "</a></li>";
      }); 
  } else {
    resultsList.innerHTML += "<li>No search results</li>";
  }
}

function startSearch() {
  document.getElementById('countrySearchResultsContainer').style.display = 'block';
}

function endSearch() {
  document.getElementById('countrySearchResultsContainer').style.display = 'none';
}
</script>