Как ограничить совпадения с автозаполнением ванильного javascript?

Я создал функцию «нравится/не нравится» для своего приложения Django.

Он использует jQuery/ajax и работает нормально, но нарушает мой поиск автозаполнения Devbridge (https://github.com/devbridge/jQuery-Автозаполнение).

Я решил заменить автозаполнение Devbridge автозаполнением vanilla JS отсюда: https://www.w3schools.com/howto/howto_js_autocomplete.asp.

Проблема в том, что в моем массиве более 10 000 элементов, поэтому, когда вы вводите первые несколько букв, он дает сотни или тысячи совпадений.

Я хотел бы ограничить количество совпадений. Любая помощь очень ценится. Я включил то, что, как я предполагаю, является наиболее подходящим кодом. Для полного кода просто проверьте ссылку.

<script>
function autocomplete(inp, arr) {
  /*the autocomplete function takes two arguments,
  the text field element and an array of possible autocompleted values:*/

var currentFocus;
  /*execute a function when someone writes in the text field:*/
  inp.addEventListener("input", function(e) {
  var a, b, i, val = this.value;
  /*close any already open lists of autocompleted values*/
  closeAllLists();
  if (!val) { return false;}
  currentFocus = -1;
  /*create a DIV element that will contain the items (values):*/
  a = document.createElement("DIV");
  a.setAttribute("id", this.id + "autocomplete-list");
  a.setAttribute("class", "autocomplete-items");
  /*append the DIV element as a child of the autocomplete container:*/
  this.parentNode.appendChild(a);
  /*for each item in the array...*/
  for (i = 0; i < arr.length; i++) {
    /*check if the item starts with the same letters as the text field value:*/
    if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
      /*create a DIV element for each matching element:*/
      b = document.createElement("DIV");
      /*make the matching letters bold:*/
      b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
      b.innerHTML += arr[i].substr(val.length);
      /*insert a input field that will hold the current array item's value:*/
      b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
      /*execute a function when someone clicks on the item value (DIV element):*/
      b.addEventListener("click", function(e) {
          /*insert the value for the autocomplete text field:*/
          inp.value = this.getElementsByTagName("input")[0].value;
          /*close the list of autocompleted values,
          (or any other open lists of autocompleted values:*/
          closeAllLists();
      });
      a.appendChild(b);
    }
  }
  });