0

So how could I implement a multiple selected values from a drop down. Currently The javascript displays matches based on search input and a selected value from the drop down. It also takes into account the drop down choices (which shop to choose from) but for only one option. After changing the <select> to multiple it only recognizes the first selected option. How can I make it so the javascript can understand that if there is more then one option selected then to show matches corresponding that?

HTML

<select class="custom-select" multiple="multiple">
    <option value="" selected>All Shops</option>
    <option value="https://centra.">Centra</option>
    <option value="https://www.tesco.">Tesco</option>
    <option value="https://shop.supervalu.">SuperValu</option>
    <option value="https://www.lidl.">Lidl</option>
    <option value="https://www.aldi.">Aldi</option>
</select>

Javascript

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



function displayMatches() {
const searchText = document.querySelector('.search').value;

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; 
};
valeriu7474
  • 65
  • 4
  • How to get all the selected values: https://stackoverflow.com/questions/5866169/how-to-get-all-selected-values-of-a-multiple-select-box/5866331 – d3bgger May 26 '20 at 15:44
  • You'll need to run `displayMatches()` once for each selected item instead of just once on the comma-separated value of the `select`. – Scott Marcus May 26 '20 at 15:45
  • The json file that it uses to pull information is in price ascending order. Would that not show all results from one, then the next, not truly showing them in price ascending order (Like mixed ) – valeriu7474 May 26 '20 at 15:49

0 Answers0