如何更改此 function 以显示一个结果？

Question

I have this function that shows all matches that have "20 pack" in the json database. Is there a way to manipulate this function to just search and stop after the first match. The database is in price ascending order hence the first result will be the cheapest.

 function displayMatches() {
    const searchText = '20 pack';
    const searchUrl = document.querySelector('.custom-select').value;
    const matchArray = findMatches(searchText, searchUrl, name);

      const html = matchArray.map(place => {
        const regex = new RegExp(searchText);
        const nameName = place.name.replace(regex, `<span class="hl">${searchText}</span>`);
             var shop = place.url.replace(/(centra)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase());
             var shop1 = place.url.replace(/(tesco)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase());
             var shop2 = place.url.replace(/(aldi)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase());
             var shop3 = place.url.replace(/(lidl)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase());
             var shop4 = place.url.replace(/(supervalu)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase());
        return `
            <a href="${place.url}" target="_blank">
                <li>
                    <span class="name">${nameName} <br> ${(place.price)} <br><br><sup>${shop} ${shop1} ${shop2} ${shop3} ${shop4}</sup></span>
                    <img src="${place.imgurl}" alt="Drink Image" height="87.5" width="100">

                </li>
            </a>

        `;
      }).join('') || '<li> No Searches Found </li>';
      suggestions.innerHTML = html; 
    };

And my find matches function is

function findMatches(wordToMatch, searchUrl, name) {
    const regEx = new RegExp(wordToMatch, 'gi');
    return name.filter(place => {
        return regEx.test(place.name) && place.url.startsWith(searchUrl);
    });
}

Answer 1

Besides the comment answer ( of just using const matchArray = findMatches(searchText, searchUrl, name).slice(0,1); ) which is a quick hack, a more valid way would be to directly search just for the first instead of finding all and then using only the first.

• You could create a findSingleMatch that instead of filter uses the find method to find the first item in the array.
• In your case you should also not re-use the same RegExp object, since you are using .test which takes into account the previous index of a match when searching for the next ( see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test#Description ).
• finally you should put the <a> tag inside the li as it is invalid to put <a> directly under a <ul>

 function displayMatches() { const searchText = '20 pack'; const searchUrl = document.querySelector('.custom-select').value; const place = findSingleMatches(searchText, searchUrl, name); if (place) { const regex = new RegExp(searchText); const nameName = place.name.replace(regex, `<span class="hl">${searchText}</span>`); var shop = place.url.replace(/(centra)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase()); var shop1 = place.url.replace(/(tesco)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase()); var shop2 = place.url.replace(/(aldi)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase()); var shop3 = place.url.replace(/(lidl)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase()); var shop4 = place.url.replace(/(supervalu)|[^]/g, '$1').replace(/^\w/, c => c.toUpperCase()); html = ` <li> <a href="${place.url}" target="_blank"> <span class="name">${nameName} <br> ${(place.price)} <br><br><sup>${shop} ${shop1} ${shop2} ${shop3} ${shop4}</sup></span> <img src="${place.imgurl}" alt="Drink Image" height="87.5" width="100"> </a> </li> `; } else { html = '<li> No Searches Found </li>' } suggestions.innerHTML = html; }; function findSingleMatch(wordToMatch, searchUrl, name) { return name.find(place => { const regEx = new RegExp(wordToMatch, 'gi'); return regEx.test(place.name) && place.url.startsWith(searchUrl); }); }