Question

我想构建一个搜索过滤器，例如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”时，他应从第一个字母为“ a”的json-array中搜索所有项并将其放入新数组中。就像反应式搜索过滤器一样。

Answer 1

尽管我没有通过执行来验证我的解决方案，但在我看来，您需要微调过滤器。

如果您希望区分大小写，我会尝试

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

，并且您希望区分大小写，只需删除.toLowerCase()

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

1 个答案: