城市自动匹配的新技能Get

2023-10-11 00:12:56

前言

在许多网站或应用程序中，都需要用户输入城市名称。为了提高用户体验，可以实现城市自动匹配功能，即当用户在搜索框中输入文字时，自动匹配并显示与之相关的城市名称。本文将介绍如何使用 HTML 和 JavaScript 实现城市自动匹配功能。

HTML 代码

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <input type="text" id="city" placeholder="输入城市名称">
  <ul id="result"></ul>

  <script src="script.js"></script>
</body>
</html>

JavaScript 代码

// 获取输入框元素
const cityInput = document.getElementById('city');

// 获取结果列表元素
const resultList = document.getElementById('result');

// 创建一个城市列表
const cities = ['北京', '上海', '广州', '深圳', '天津', '重庆', '南京', '杭州', '武汉', '成都'];

// 当用户输入文字时，自动匹配并显示与之相关的城市名称
cityInput.addEventListener('input', () => {
  // 获取用户输入的文字
  const inputValue = cityInput.value;

  // 过滤出与用户输入的文字相关的城市名称
  const filteredCities = cities.filter(city => city.includes(inputValue));

  // 清空结果列表
  resultList.innerHTML = '';

  // 将过滤出的城市名称添加到结果列表中
  filteredCities.forEach(city => {
    const listItem = document.createElement('li');
    listItem.textContent = city;
    resultList.appendChild(listItem);
  });
});