Javascript 如何在keyup处使用eventListener输入值过滤JSON数组

我想构建一个搜索过滤器，比如forEach，通过一系列obj，比如：

const lngLatLocation = [
  {
    "id": "alster",
    "name": "Alster",
    "link": "https://en.wikipedia.org/wiki/Alster",
    "coordinates": [9.997649, 53.557344]
  },
  {
    "id": "elbphilharmonie",
    "name": "Elbphilharmonie",
    "link": "https://www.elbphilharmonie.de/en/elbphilharmonie",
    "coordinates": [9.984198, 53.541267]
  },
  {
    "id": "rathaus",
    "name": "Rathaus / TownHall",
    "link": "https://en.wikipedia.org/wiki/Hamburg_City_Hall",
    "coordinates": [9.992061, 53.550252]
  },
  {
    "id": "aplantenUnBloomen",
    "name": "Planten Un Blomen",
    "link": "https://www.hamburg.com/explore/outdoors/11872624/planten-un-blomen/",
    "coordinates": [9.982028, 53.560427]
  }
]

并使用名称的输入字段进行筛选。 每个钥匙都有一个

      document.querySelector('.location-filter').addEventListener('keyup', () => {
        // FILTER HERE FOR INPUT VALUE
        const filteredLocations = lngLatLocation.filter(({name}) => name == input.value);
        console.log(filteredLocations);

      });

在我的示例中，当我区分大小写并且字符串完整时，我只找到“Alster”

我想要的是，当我在输入中键入“a”时，他应该从json数组中搜索所有项目，其中第一个字母是“a”，并将它们放入新数组中。

---

就像一个反应式搜索过滤器。

虽然我没有通过执行它来验证我的解决方案，但我觉得您需要稍微调整一下过滤器

如果你想在敏感的情况下，我会尝试

lngLatLocation.filter(({name}) => name.toLowerCase().startsWith(prefix.toLowerCase()));

---

如果您更喜欢区分大小写，那么只需删除

.toLowerCase（）

当您键入“A”时，您希望显示Alster，因为该词以A开头。但是你不希望搜索结果中的其他项目是ElbPhilomonie、Rathaus/TownHall、Planten-Un-Blomen，即使它包含一个。是吗？@Ajay Varghese，是的，是的。仅通过传递实际名称进行筛选。一个字母接一个字母。您可以使用

startsWith

string函数@Mr.已经发布了用法作为答案。