Question

我有以下代码片段，我将其嵌入到Wix网站中。

// JavaScript 

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';
}

/* CSS */
#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;
}

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

在这个脚本中，我试图在泰国输入，当它作为选项出现时，我点击它。但是，当我这样做时，网站：“www.google.com”不会弹出。我错过了什么？

Answer 1

您输入的网址不正确。引用外部网站时，您需要包含该方案。将链接从www.google.com更改为http://www.google.com，您就可以在输入Thailand时打开链接。

Answer 2

当您使用www.google.com时，该链接将引用名为www.google.com的HTML文件所在文件夹中的文件或内容。如果您想在文件中使用网络链接，则应考虑在链接前添加http:/或https:/。 https:/www.google.com/

html中的链接无效

2 个答案: