Просто нужна небольшая помощь для моей панели поиска

let avaliableKeywords = [
  '6TEST6',
  '5TEST5',
  '4TEST4',
  '3TEST3',
  '2TEST2',
  '1TEST1',
];

const resultsBox = document.querySelector(".result-box")
const inputBox = document.getElementById("input-box")

inputBox.onkeyup = function() {
  let result = [];
  let input = inputBox.value;
  if (input.length) {
    result = avaliableKeywords.filter((keyword) => {
      return keyword.toLowerCase().includes(input.toLowerCase());
    });
    console.info(result);
  }
  display(result);

  if (!result.length) {
    resultsBox.innerHTML = '';
  }
}

function display(result) {
  const content = result.map((list) => {
    return "<li onclick=selectInput(this)>" + list + "</li>";
  });

  resultsBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}


function selectInput(list) {
  inputBox.value = list.innerHTML
  resultsBox.innerHTML = '';
}

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins" sans-serif;
  box-sizing: border-box;
}

body {
  background: #181818
}

.search-box {
  position: absolute;
  top: 50%;
  right: 50%;
  width: 600px;
  background: rgb(255, 255, 255);
  border-radius: 5px;
  margin: 200px auto 0;
}

.row-search {
  display: flex;
  align-items: center;
  padding: 10px 20px;
}

input {
  flex: 1;
  height: 50px;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 18px;
  color: #333;
}

button {
  background: transparent;
  border: 0;
  outline: 0;
}

button .Srch-img {
  width: 25px;
  color: #555;
  font-size: 22px;
  cursor: pointer;
}

 ::placeholder {
  color: #555;
}

.result-box ul {
  border-top: 1px solid #999;
  padding: 15px 10px;
}

.result-box ul li {
  list-style: none;
  border-radius: 3px;
  padding: 15px 10px;
  cursor: pointer;
}

.result-box ul li:hover {
  background: #e9f3ff;
}

.result-box {
  max-height: 300px;
  overflow-y: scroll;
}

<link rel = "stylesheet" href = "style.css">
<script src = "https://unpkg.com/[email protected]/dist/boxicons.js"></script>

<header class = "header">
  <a href = "#" class = "logo">FYE-Movies</a>

  <nav class = "navbar">
    <a href = "index.html">Home</a>
    <a href = "Movies.html">Featured Movies</a>
    <a href = "Series.html">Series</a>
    <a href = "Search.html">Search</a>
    <a href = "Beta.html">BETA Version</a>
  </nav>
  <div class = "search-box">
    <div class = "row-search">
      <input type = "text" id = "input-box" placeholder = "Search Movies" autocomplete = "off">
      <button><img class = "Srch-img" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAv5JREFUWEfVl1mojVEUx3/XWAp54xozRMjNi4QHUaYoD4iMxeVFoUSUlGRMJCRkKFIohVAyPSBPFGXIFJFQlIyZ9l/ruN/dfed8e1/nHMd6Oef7zlr//T9r3lVUmFRVGB/+W0LDgBHAQKAr0BZ4CTwCrrn3Z4HLxfB2lodqgO3A4IDDzgPzgbsBunlVChGaDuwGmkcc8AmYBJyKsKmnmo/QBOBoQvObC9NO4CJwD3hsoesFKJxzgcYJfYX3XENIpRHqDNwCWhrgQ2AMcL/AAX2BM0AH03kN9HYhfBNLKo3QcWC8AckbQwKBReYq0NFsdwHz/pbQAOC6gXwFegJPIkBVBDfgdzv5CXS3SgyG8D20BVhg1vq+KBipTvGwq7TJ9rgE2BiD4RNSycorkkHWY2LwpDvR5c8RM7oADI8B8Am9A1obQCvgfQyY6XaxKtTjU0BFEiw+IeVNU7NuAnwPRqpTVN/6bI/qSy1iMHxCL4B2BqBPjYdYqQaem5HaR78YAJ/QFcsdYYy2GRWDJ91xwAkzOgRMiwHwCa0AVhnAHvdPa2PATPcgMNW+L3Uh2xCD4RPSKLhjAD+s26o5hor60E1T/gL0AJ6FGksvrVMfcM1shoE8sEn/KgC0k3Xq9qa72hWFPB4laYSUlLeBNoakQToqY5b1B07bniQzFUM34GMUmzweEsZY4GQCTNN+B3ApMe3VQDVAhwJzPKxjbuTMAj4Ui5BwpgD7gWYRoOo/yiFtlm8BjZ+tgBpukGRtjH2AbeaFLECNCVWlvKncyzVYhW19onoL4mQRyhlrCRuZ2KmVZ40sR7RL7/MWOi1z/uqhBFeiF4VQFo7/uypOF4DkFimdlVmeCvVQLCHprwGWpRiqUaphpkopCQlbl4TZKSerWPRezbeelJKQDlKe7XXryMwUUnqvdqHN8o+UmlDuoM2u9BemkNKVKXm7KetVWqvs4gSptcDycofMP2+dJbSIbUrL6nKFLHm2Ro1GUNmrrCGtoqw5FETwX4SsILGKI/QL1St7JZXUgxYAAAAASUVORK5CYII = "/></button>
    </div>
    <div class = "result-box">
    </div>
  </div>