使用 Fuse.js 和 Alpine.js 搜索邮政编码

Question

在大多数情况下，搜索功能运行良好。它拉入正确匹配的邮政编码，问题是它只显示与 matchedZipCodes 数组中第一个邮政编码的匹配。

例。如果我有两个邮政编码为 60202 的对象，一个邮政编码为 60201 的对象和一个邮政编码为 60659 的对象，并且所有这些都存在于 matchedZipCodes 数组 [60202、60201、60659] 中。只有带有 60202 的对象才会显示。

我错过了什么？谢谢！

JS:

 async search() {
        this.fieldValues = []
        var options = []
        this.errorCode = ""
        const keywords = document.getElementById('data-search-keyword').value
        const keywordZip = document.getElementById('data-search-zip').value
        const city = document.getElementById('data-search-city').value
        const credential = document.getElementById('data-search-credential').value
        const type = document.getElementById('data-search-type').value

        if (keywordZip != "") {
          options = {
            minMatchCharLength: 5,
            threshold: 0.0,
            keys: ["zipCode"]
          }
        }
        else {
          options = {
            minMatchCharLength: 3,
            threshold: 0.3,
            keys: ["title", "cities", "credentials", "types", "zipCode"]
          }
        }

        const fuse = new Fuse(window.peers, options)

        if (keywordZip != "") {
          const peers = window.peers
          const zipCodes = []
          peers.forEach(peer => {
            zipCodes.push(peer["zipCode"])
          })
          zipCodes.push(keywordZip);
          const zipCodeData = await fetch(`https://www.zipcodeapi.com/rest/js-o6djISSFXFT1DKg3T0f4i43Rps0Qyq3WTilSzCiyM6hLrXu2yBAvNc1E6aUxnbg6/radius.json/${keywordZip}/20/mile`)
          const zipCodeDataJson = await zipCodeData.json()
          if (zipCodeDataJson.error_code) {
            this.errorCode = 'Zip Code Filter API Error: ' + zipCodeDataJson.error_msg + ' Please try again later.'
          }
          else {
            **var radiusZipCodes = zipCodeDataJson.zip_codes.map(zip => zip.zip_code)
            var matchedZipCodes = radiusZipCodes.filter(zip => zipCodes.includes(zip))
            console.log(matchedZipCodes);
            if (matchedZipCodes.length > 0) {
                this.fieldValues.push({ zipCode: matchedZipCodes[0] });
            }
            else {
              this.fieldValues.push({ zipCode: '' })**
            }
          }
        }

这是前端显示搜索匹配项的方式：

<template x-for="[id, value] in Object.entries(results)" :key="id">
                        <tr class="border-b border-brand-gray">
                            <td class="p-2 align-text-top">
                                <span :href="value.item.url" x-html="value.item.title" class="text-lg"></span>
                            </td>
                            <td class="p-2 align-text-top">
                                <template x-for="(city, index) in value.item.cities" :key="index">
                                    <span x-html="index < value.item.cities.length-1 ? city + ', ' : city"></span>
                                </template>
                            </td>
              <td class="p-2 align-text-top">
                <template x-for="(credential, index) in value.item.credentials" :key="index">
                  <span x-html="index < value.item.credentials.length-1 ? credential + ', ' : credential"></span>
                </template>
              </td>
              <td class=" p-2 align-text-top">
                                <div x-html="value.item.model" class="text-sm md:text-base text-black"></div>
                            </td>
              <td class=" p-2 align-text-top">
                <template x-for="(post, index) in value.item.peerResources" :key="index">
                  <span x-html="post"></span>
                </template>
                            </td>
              <td class=" p-2 align-text-top">
                                <div x-html="value.item.agency" class="text-sm md:text-base text-black"></div>
                            </td>
                            <td class="p-2 align-text-top">
                                <div x-html="value.item.certDate" class="text-sm md:text-base text-black"></div>
                            </td>
                        </tr>
                    </template>