Frontend Interview Вопросы с ответами -4

Упреждающий ввод с надлежащим пользовательским интерфейсом и оптимизация производительности в простом JavaScript

Вот пример того, как вы можете реализовать компонент с вводом текста, используя простой JavaScript с надлежащим пользовательским интерфейсом и оптимизацией производительности.

<input type="text" id="typeahead">
<ul id="suggestions" style="display: none;"></ul>
<script>
  const input = document.getElementById("typeahead");
  const suggestionsList = document.getElementById("suggestions");
  let suggestions = [];

  input.addEventListener("input", function() {
    const value = input.value;
    let filteredSuggestions = [];
    suggestions.forEach(suggestion => {
      if (suggestion.toLowerCase().startsWith(value.toLowerCase())) {
        filteredSuggestions.push(suggestion);
      }
    });
    
    if (filteredSuggestions.length > 0) {
      suggestionsList.style.display = "block";
      suggestionsList.innerHTML = "";
      filteredSuggestions.forEach(suggestion => {
        const suggestionItem = document.createElement("li");
        suggestionItem.innerHTML = suggestion;
        suggestionItem.addEventListener("click", function() {
          input.value = suggestion;
          suggestionsList.style.display = "none";
        });
        suggestionsList.appendChild(suggestionItem);
      });
    } else {
      suggestionsList.style.display = "none";
    }
  });
  
  input.addEventListener("focus", function() {
    const value = input.value;
    if (value.length > 0) {
      suggestionsList.style.display = "block";
    }
  });
  
  input.addEventListener("blur", function() {
    suggestionsList.style.display = "none";
  });
  
  // Example data
  suggestions = ["apple", "banana", "cherry", "date", "elderberry"];
</script>

В этом примере у нас есть элемент ввода и неупорядоченный список для отображения предложений. Код прослушивает событие «input» для элемента ввода и фильтрует предложения на основе значения ввода. Отфильтрованные предложения отображаются в неупорядоченном списке, и отображение предложений скрывается, когда ввод теряет фокус.