Как ограничить число элементов списка?

Question

При вводе букв, появляются подходящие города, как можно ограничить появление городов до максимум 5 штук? https://codepen.io/mars1k12/pen/YzGXaXa

    function Get(url) {
  var HttpReq = new XMLHttpRequest();
  HttpReq.open("GET", url, false);
  HttpReq.send(null);
  return HttpReq.responseText;
}
 
var countries = JSON.parse(
  Get("https://restcountries.eu/rest/v2/all?fields=name")
);
console.log(countries);
 
countries.map(function (element, index) {
  countries[index] = element.name;
});
 
// variables
var input = document.querySelector("input");
var results,
  countries_to_show = [];
var autocomplete_results = document.getElementById("autocomplete-results");
 
// functions
function autocomplete(val) {
  var countries_returned = [];
 
  for (i = 0; i < countries.length; i++) {
    if (val === countries[i].toLowerCase().slice(0, val.length)) {
      countries_returned.push(countries[i]);
    }
  }
 
  return countries_returned;
}
// events
input.onkeyup = function (e) {
  input_val = this.value.toLowerCase();
 
  if (input_val.length > 0) {
    autocomplete_results.innerHTML = "";
    countries_to_show = autocomplete(input_val);
 
    for (i = 0; i < countries_to_show.length; i++) {
      autocomplete_results.innerHTML +=
        "<li id=" +
        countries_to_show[i] +
        ' class="list-item">' +
        countries_to_show[i] +
        "</li>";
    }
    autocomplete_results.style.display = "block";
  } else {
    countries_to_show = [];
    autocomplete_results.innerHTML = "";
  }
};
// Get the element, add a click listener...
document
  .getElementById("autocomplete-results")
  .addEventListener("click", function (e) {
    // e.target is the clicked element!
    // If it was a list item
    if (e.target && e.target.nodeName == "LI") {
      // List item found!  Output the value!
      console.log(e.target.innerHTML);
      input.value = e.target.innerHTML;
      autocomplete_results.innerHTML = null; //empty the value
    }
  });

Answer 1

добавил в этот цикл прерывание

(if (i>=4) break)

// events
input.onkeyup = function (e) {
  input_val = this.value.toLowerCase();
 
  if (input_val.length > 0) {
    autocomplete_results.innerHTML = "";
    countries_to_show = autocomplete(input_val);
 
    for (i = 0; i < countries_to_show.length; i++) {
      autocomplete_results.innerHTML +=
        "<li id=" +
        countries_to_show[i] +
        ' class="list-item">' +
        countries_to_show[i] +
        "</li>";
 if (i>=4) break; //Добавлено
    }
    autocomplete_results.style.display = "block";
  } else {
    countries_to_show = [];
    autocomplete_results.innerHTML = "";
  }
};

Правильно ли это?

Answer 2

Попробуйте задать условие продолжения цикла макс до 5 итераций и длины массива:

 for (i = 0; i < 5 && i < countries_to_show.length; i++) {
          autocomplete_results.innerHTML +=
            "<li id=" +
            countries_to_show[i] +
            ' class="list-item">' +
            countries_to_show[i] +
            "</li>";
        }

Также можно обработать внутри цикла проверку на каждую 5 итерацию:

for (i = 0; i < countries_to_show.length; i++) {
    if (i < 5) {
       autocomplete_results.innerHTML +=
       "<li id=" +
       countries_to_show[i] +
       ' class="list-item">' +
       countries_to_show[i] +
       "</li>";
     } else break;
}

Answer 3

Для ограничения количества для вывода достаточно возвращать из autocomplect массив с не более чем 5 элементами

function autocomplete(val) {
  var countries_returned = [];
 
  for (i = 0; 
    i < countries.length &&
    countries_returned.length <= 5; // если количество найденных будет больше 5 произойдет выход из цикла
    i++) {
    if (val === countries[i].toLowerCase().slice(0, val.length)) {
      countries_returned.push(countries[i]);
    }
  }
 
  return countries_returned;
}

Для проверки того, что одна строка начинается с другой можно пользоваться методом .startsWith, тогда строка

if (val === countries[i].toLowerCase().slice(0, val.length)) {

поменяется на

if (countries[i].toLowerCase().startsWith(val)) {

БЛОГ НА HUSL

Как ограничить число элементов списка?

Ответы (3 шт):