JavaScript：编码练习，输入首字母输入框自动联想以该字母开头的国家列表

kllo__

已于 2022-02-18 11:27:27 修改

阅读量521

点赞数

分类专栏： javascript 文章标签： javascript linq p2p

于 2022-02-18 10:58:40 首次发布

本文链接：https://blog.csdn.net/kllo__/article/details/122998585

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

本文介绍了如何实现实时的国家名称输入联想功能。当用户在输入框开始输入以'A'开头的国家名时，页面会即时显示匹配的国家列表。通过监听输入事件并创建带有点击事件处理的建议元素，实现了用户选择国家后输入框自动填充的功能。同时，对CSS进行了样式设置，以提升用户体验。

摘要由CSDN通过智能技术生成

问题描述

当用户在输入框中输入国家名称时，页面会显示相应国家的列表。单击建议的国家会替换输入框中的值。为简单起见，仅考虑以"A" 开头的国家。

HTML:

<html>
 <head>
 </head>
 <body>
   <label for="country">Enter a country name</label>:
	<input type="text" id="country">
	<div id="suggestions"></div>

 </body>
</html>

CSS:

/* Add spacing between each country suggestion */
.suggestion {
    padding-left: 2px;
    padding-right: 2px;
}

/* Change suggestion color when hovering it with the mouse */
.suggestion:hover {
    background-color: #adf;
    cursor: pointer;
}

/* Position the suggestion list just below the input box */
#suggestions {
    position: absolute;
    border: 1px solid black;
    left: 155px;
}

显示效果：

解决方法

我的：必须在输入完点击别的地方才能显示出来，也就是失去焦点之后。。。。

解决，监听事件类型改为 "input" 即可

// Country list
const countryList = [
  "Afghanistan",
  "Albania",
  "Algeria",
  "Andorra",
  "Angola",
  "Anguilla",
  "Antarctica",
  "Antigua-and-Barbuda",
  "Argentina",
  "Armenia",
  "Aruba",
  "Australia",
  "Autria",
  "Azerbaïjan"
];
const countryElement = document.getElementById("country");
const suggetsElement = document.getElementById("suggestions");
const createParaElement = text=>{
  const element = document.createElement("p");
  element.textContent = text;
  return element;
}
countryElement.addEventListener("change", e=>{
  if(e.target.value.startsWith("A"))
  {
    countryList.forEach(country =>{
    suggetsElement.appendChild(createParaElement(country));
  });
  }
});
suggetsElement.addEventListener("click", e=>{
  countryElement.value =  e.target.textContent;
  document.body.removeChild(suggetsElement);
});

显示效果：

参考答案：输入框以输入就显示联想建议

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

const countryElement = document.querySelector("input");
const suggestionsElement = document.getElementById("suggestions");

// Create and return a suggestion
const createSuggestionElement = country => {
  const element = document.createElement("div");
  element.classList.add("suggestion");
  element.textContent = country;
  // Handle click on a suggestion
  element.addEventListener("click", e => {
    // Replace input with suggested country
    countryElement.value = e.target.textContent;
    // Empty the suggestion list
    suggestionsElement.innerHTML = "";
  });
  return element;
};

// Handle input change
countryElement.addEventListener("input", () => {
  // Empty suggestion list
  suggestionsElement.innerHTML = "";
  countryList.forEach(country => {
    // Check if the inputted value matches the start of the country
    if (country.startsWith(countryElement.value)) {
      // Add the country as suggestion
      suggestionsElement.appendChild(createSuggestionElement(country));
    }
  });
});

看了答案之后的改进：

// Country list
const countryList = [
  "Afghanistan",
  "Albania",
  "Algeria",
  "Andorra",
  "Angola",
  "Anguilla",
  "Antarctica",
  "Antigua-and-Barbuda",
  "Argentina",
  "Armenia",
  "Aruba",
  "Australia",
  "Autria",
  "Azerbaïjan"
];
const countryElement = document.getElementById("country");
const suggetsElement = document.getElementById("suggestions");

const createParaElement = text=>{
  const element = document.createElement("div");
  element.classList.add("suggestion");
  element.textContent = text;
  element.addEventListener("click",e=>
  {
    countryElement.value=e.target.textContent;
    suggetsElement.innerHTML="";
  });
  return element;
}
countryElement.addEventListener("input", e=>{
  suggetsElement.innerHTML = "";
  countryList.forEach(country =>
  {
    if(country.startsWith(e.target.value))
    {
      suggetsElement.appendChild(createParaElement(country));
    }
  });
  
});