//based on Created by Bruno Silva 5/02/2021

//modified datalist version mnse

​

let i;

let finalSet=[];

const test = document.getElementById('myselect');

const testlist = document.getElementById('mylist');

const button = document.getElementById('mybutton');

const basket   = document.getElementById('mybasket');

​

function setup() {

  createCanvas(400, 400);

  i=select('#myselect')

  i.position(20,20);

  i=select('#mybutton')

  i.position(170,20);

  i=select('#mybasket')

  i.position(20,40);

  test.addEventListener('input',()=>search(test.value))

  button.addEventListener('click',() => {

     var pelem = document.createElement('p');

     pelem.style='margin:0;margin-left:20px;'

     var mytext = document.createTextNode(test.value);

     pelem.appendChild(mytext);

     basket.appendChild(pelem);

  })  

}

​

//gets the data and creates an array to filter

const search = async searchtext=>{

    const res = await fetch('data.json');

    const songs = await res.json();

    matches = songs.filter(song => {

    const regex = new RegExp(`^${searchtext}`,`gi`);

    return song.Tools.match(regex)  

    });

​

  filterTools(matches)

}

​

//this can be optional. It removes all the repeated elements in the filtered array

function filterTools(matches){

  let arrSnames = [];

  for(let i=0;i<matches.length;i++){

    arrSnames[i]=matches[i].Tools;

  }

  const uniqueSet = new Set(arrSnames);

  finalSet = [...uniqueSet];  

  testlist.innerHTML="";

  for(let i=0;i<finalSet.length;i++){

   var option = document.createElement('option');

   option.value = finalSet[i];

   testlist.appendChild(option);

  }  

  //print(finalSet)

}

​

​

​