Showing only a specific amount of Elements on a document

I am creating a search input which displays a list of results as the user inputs text. The results are called from a JSON database, which then takes certain info and places it as text within an anchor element. I am trying to display only six of these results at a time, and was wondering if there was a way to put a cap on the amount of a certain element which can be displayed and doesn’t over-rule the i variable I already have set? Thank you

My Code:

    for (let i=0; i < results.length; i++) {
  var div = document.getElementById('dropdown');
  var link = document.createElement('a');
  var locDot = document.createElement('img');
  var linkT = document.createElement('h1');
  var linkV = document.createElement('p');
  link.setAttribute('href', 'NTS_TAXI_PLACEMENT.html');
  link.setAttribute('class', 'link');
  link.setAttribute('id', `link${i}`);
  locDot.setAttribute('src', 'locationDot.png');
  locDot.setAttribute('class', 'locationDot');
  linkT.setAttribute('class', 'address');
  linkV.setAttribute('class', 'city');
  linkT.textContent = (`${results[i].title}`);
  linkV.textContent = (`${results[i].vicinity}`);
  div.appendChild(link);
  link.appendChild(locDot);
  link.appendChild(linkT);
  link.appendChild(linkV);
    var linkAmount = div.getElementsByTagName('a');
    var linkDisplay = linkAmount[i].style.display;
    document.getElementById('test').innerHTML = linkDisplay;
    
    function filterFunction() {
      var i, input, inputStr, div, a;
      input =  document.getElementById('searchInput');
      inputStr = input.value.toUpperCase();
      div = document.getElementById('dropdown');
      a = document.getElementsByTagName('a');
      for (i=0; i < results.length; i++) {
          txtValue = a[i].textContent;
          if (txtValue.toUpperCase().indexOf(inputStr) > -1) {
              a[i].style.display = "";
          } else {
              a[i].style.display = "none"; 
          }
      }
    }
}