0

我正在使用 javascript 在输入文本元素上实现自动完成。该代码使用国家列表在用户开始输入字母时自动完成。如何将文本框中的值替换为用户从显示的国家/地区中选择单击的国家/地区。Codepen 在这里。谢谢你。

// Country list
const countryList = [
  "Afghanistan",
  "Albania",
  "Algeria",
  "Andorra",
  "Angola",
  "Anguilla",
  "Antarctica",
  "Antigua-and-Barbuda",
  "Argentina",
  "Armenia",
  "Aruba",
  "Australia",
  "Autria",
  "Azerbaïjan"
];

document.getElementById("country").addEventListener("input", e => {
  let suggestions = document.getElementById("suggestions");
  suggestions.innerHTML = "";
  countryList.forEach(country => {
    if (country.startsWith(e.target.value)) {
      suggestions.innerHTML += country + "<br>";
    };
  });

});
4

1 回答 1

0

有许多可用的自动完成库，你可以用谷歌搜索它。

但是我已经修改了你的代码，你可以检查它，它不会很健壮，但你可以改进它。您可以查看codepen。

// Country list
const countryList = [
  "Afghanistan",
  "Albania",
  "Algeria",
  "Andorra",
  "Angola",
  "Anguilla",
  "Antarctica",
  "Antigua-and-Barbuda",
  "Argentina",
  "Armenia",
  "Aruba",
  "Australia",
  "Autria",
  "Azerbaïjan"
];

document.getElementById("country").addEventListener("input", e => {
  let suggestions = document.getElementById("suggestions");
  suggestions.innerHTML = "";
  let suggestionTemplage = '<ul>';
  countryList.forEach(country => {
    if (country.startsWith(e.target.value)) {
      suggestionTemplage += `<li data-country="${country}"class="country">${country}</li>`;
 // create a li to set countries name and setclass name country to each li
    };
  });
    suggestionTemplage += '</ul>';
// set suggestions innerHTML to created template of li 
    suggestions.innerHTML = suggestionTemplage;
  
   let elmList = Array.from(document.querySelectorAll('.country'));
// bind click event to each country class which is set in li
    elmList.map((elm) =>{
        elm.addEventListener('click', function() {
      // on click get the country name and set to input element
          document.getElementById("country").value = this.getAttribute('data-country');
          suggestions.innerHTML = "";
        });
    });
});
A   <label for="country">Enter a country name</label>:
	<input type="text" id="country">
	<div id="suggestions"></div>

于 2019-12-08T09:20:04.780 回答