Christian Christian - 2 months ago 10
CSS Question

link in html is not working

I have the following code snippet that I am embedding into a Wix website.

<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 white;
background-color: rgba( 150, 150, 150, 0.1);
margin: 0;
}


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

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

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

#countrySearchInput {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#countrySearchInput::-webkit-input-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#countrySearchInput::-moz-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#countrySearchInput::-ms-input-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#countrySearchInput::-ms-placeholder {
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
}




</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: 'www.google.com' },
{ name: 'Tanzania', link: '' },
{ name: 'Tunisia', link: '' },
{ name: 'Taiwan', 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>


In this script, I am trying to type in Thailand, and when it appears as an option, I click it. However, when I do, the website: "www.google.com" does not pop up. What am I missing?

Answer

The URL that you have entered is incorrect. When referencing external websites you need to include the scheme. Change the link from www.google.com to http://www.google.com and you will be able to open the link when entering Thailand.