js 城市列表

const cities = ['北京', '上海', '广州', '深圳'];
console.log(cities);

const cities = [
  { name: '北京', population: 2154, area: 16410 },
  { name: '上海', population: 2424, area: 6340 },
  { name: '广州', population: 1350, area: 7434 },
  { name: '深圳', population: 1253, area: 1997 }
];

console.log(cities);

fetch('/api/cities')
  .then(response => response.json())
  .then(data => {
    const citiesList = document.getElementById('cities-list');
    data.forEach(city => {
      const listItem = document.createElement('li');
      listItem.textContent = city.name;
      citiesList.appendChild(listItem);
    });
  })
  .catch(error => console.error('Error fetching cities:', error));

const input = document.getElementById('city-input');
const citiesList = document.getElementById('cities-list');

input.addEventListener('input', function() {
  const filterValue = this.value.toLowerCase();
  const filteredCities = cities.filter(city => city.name.toLowerCase().includes(filterValue));
  
  // 清空当前列表
  citiesList.innerHTML = '';
  
  // 重新添加过滤后的城市
  filteredCities.forEach(city => {
    const listItem = document.createElement('li');
    listItem.textContent = city.name;
    citiesList.appendChild(listItem);
  });
});