idk.html

<script type="text/javascript" src="CSVparser.js"></script>
<script type="module">
  // localStorage.clear();
  if (localStorage.getItem("headers") === null || localStorage.getItem("rows") === null) {
    const [headers, rows] = await getCSV();
    localStorage.setItem("headers", JSON.stringify(headers));
    localStorage.setItem("rows", JSON.stringify(rows));
  } else {
    var headers = JSON.parse(localStorage.getItem("headers"));
    var rows = JSON.parse(localStorage.getItem("rows"));
  }
  var titles = [rows.map(row => row[0]), []];
  var links = [rows.map(row => row[1]), []];
  var channel_names = [rows.map(row => row[2]), []];
  
  function search(titles, links, channel_names, searchValue) {
    var results = [];
    for (let i = 0; i < titles[0].length; i++) {
      if (titles[0][i].toLowerCase().includes(searchValue.toLowerCase())) {
        results.push([titles[0][i], links[0][i], channel_names[0][i]]);
      }
    }
    if (results.length === 0) {
      return "No results found";
    } else {
      return results;
    }
  }
  const params = new URLSearchParams(window.location.search);
  const searchValue = params.get("search");
  function displayCSV(searchResults) {
    var titles = [searchResults.map(row => row[0]), []];
    var links = [searchResults.map(row => row[1]), []];
    var channel_names = [searchResults.map(row => row[2]), []];
        var table = document.createElement("table");
        table.setAttribute("id", "CSVTable");
            table.setAttribute("border", "1");
            table.setAttribute("style", "border-collapse: collapse;");
            var tr = table.insertRow(-1);
            for (var i = 0; i < headers.length + 1; i++) {
              if (i === 0) {
                var th = document.createElement("th");
                th.innerHTML = "Index";
                tr.appendChild(th);
              } else {
                var th = document.createElement("th");
                th.innerHTML = headers[i - 1];
                tr.appendChild(th);
              }
            }
            for (var i = 0; i < searchResults.length; i++) {
              tr = table.insertRow(-1);
              var cells = searchResults[i];
              for (var j = 0; j < cells.length + 1; j++) {
                if (j === 0) {
                  var td = document.createElement("td");
                  td.innerHTML = i + 1;
                  tr.appendChild(td);
                } else {
                  if (j - 1 === 1) {
                    // make links open in new tab
                    var td = document.createElement("td");
                    var a = document.createElement("a");
                    a.setAttribute("href", cells[j - 1]);
                    a.setAttribute("target", "_blank");
                    a.innerHTML = cells[j - 1];
                    td.appendChild(a);
                    tr.appendChild(td);
                  } else {
                    var td = document.createElement("td");
                    td.innerHTML = cells[j - 1];
                    tr.appendChild(td);
                  }
                }
              }
            }
            var div = document.getElementById("CSVTable");
            div.appendChild(table);
      }
  if (searchValue !== null) {
    console.log(searchValue);
    var x = search(titles, links, channel_names, searchValue)
    console.log(x, typeof x, x === "No results found");
    if (x === "No results found") {
      document.getElementById("output").innerHTML = "No results found";
    } else {
      displayCSV(x);
    }
  }
</script>

<form onsubmit="return true">
  <input type="text" id="searchInput" name="search" placeholder="Search for a song">
  <input type="submit" id="submitButton" value="Search">
</form>

<output id="output"></output>

<div id="CSVTable"></div>

<style>
  input[id="searchInput"] {
        background-color: #241227;
        padding: 5px;
        border-radius: 30px;
        border-color: #FF6ED9;
        border-style: dotted;
        margin: 10px;
        cursor: default;
        color: #FF6ED9;
        font-size: 20px;
        text-align: left;
        height: 50px;
        width: 350px;
  }
  input[id="submitButton"] {
    background-color: #241227;
    padding: 5px;
    border-radius: 30px;
    border-color: #FF6ED9;
    border-style: dotted;
    margin: 10px;
    cursor: hand;
    color: #FF6ED9;
    font-size: 20px;
    width: 100px;
    height: 50px;
  }
  #CSVTable {
        width: max-content;
        border-radius: 20px 20px 20px 20px;
        border-top: 5px solid;
        border-left: 5px solid;
        border-right: 5px solid;
        border-bottom: 5px solid;
        border-style: double;
        background-color: #241227;
        color: #241227;
        border-color: #FF6ED9;
        border-collapse: collapse;
        margin: 10px;
        font-size: 0.9em;
        overflow-y: scroll;
        overflow-x: auto;
        max-height: 900px;
      }
  th {
    background-color: #6e3d75;
    color: #FF6ED9;
  }
  tr {
    background-color: #241227;
    color: #FF6ED9;
    font-size: 1.2em;
  }
  body {
        background-color: #241227;
        color: #FF6ED9;
  }
  ::-webkit-scrollbar {
    width: 15px;
    background: #381D3C;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background: #FF6ED9;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #f18cd7;
    border-radius: 10px;
  }
</style>
<br>
<br>