Как сделать выпадающее поле ввода автозаполнения

У меня есть поле ввода, которое, когда пользователь нажимает на него и начинает печатать, мне нужно, чтобы раскрывающийся список отображал все параметры раскрывающегося списка, которые начинаются с того, что вводится. У меня уже есть большая часть функций, я просто не могу понять, как заставить его фильтровать массив и отображать только соответствующие параметры.

    const ampInput = document.querySelector('.amp-input');
    
    const ampDropdown = document.querySelector('.amp-dropdown-container');
    const ampOptions = document.querySelectorAll('.amp-options');

    ampInput.addEventListener('click', () => {
      ampDropdown.classList.add('amp-dropdown-container--active')
    })

    ampInput.addEventListener('focusout', (event) => {
      ampDropdown.classList.remove('amp-dropdown-container--active')
    });

    ampInput.addEventListener('input', onInputChange)

    function onInputChange() {
      const value = ampInput.value.toLowerCase();

      const filteredOptions = [];

      ampOptions.forEach((option) => {
        if (option.innerHTML.substr(0, value.length) === value)
          filteredOptions.push(option);
      });
      // console.log(filteredNames)
    }

<form action="{{ routes.search_url }}" method="get" role="search" autocomplete="off">
          <ul>
            <li id="autocomplete-wrapper">
              <input 
                id="autocomplete-input"
                type="search" 
                placeholder="Amp Hours (aH)" 
                class="amp-input">
                <ul class="amp-dropdown-container">
                  <h5 class="volt-options-title">Top Searches</h5>
                  <li><div class="amp-options">1.3</div></li>
                  <li><div class="amp-options">2.2</div></li>
                  <li><div class="amp-options">3.4</div></li>
                  <li><div class="amp-options">4.5</div></li>
                  <li><div class="amp-options">5</div></li>
                  <li><div class="amp-options">7</div></li>
                  <li><div class="amp-options">8</div></li>
                  <li><div class="amp-options">8.5</div></li>
                  <li><div class="amp-options">9</div></li>
                  <li><div class="amp-options">10</div></li>
                  <li><div class="amp-options">12</div></li>
                  <li><div class="amp-options">14</div></li>
                  <li><div class="amp-options">18</div></li>
                  <li><div class="amp-options">20</div></li>
                  <li><div class="amp-options">22</div></li>
                  <li><div class="amp-options">26</div></li>
                  <li><div class="amp-options">32</div></li>
                  <li><div class="amp-options">33</div></li>
                  <li><div class="amp-options">35</div></li>
                  <li><div class="amp-options">50</div></li>
                  <li><div class="amp-options">55</div></li>
                  <li><div class="amp-options">70</div></li>
                  <li><div class="amp-options">75</div></li>
                  <li><div class="amp-options">100</div></li>
                  <li><div class="amp-options">110</div></li>
                  <li><div class="amp-options">120</div></li>
                  <li><div class="amp-options">155</div></li>
                  <li><div class="amp-options">170</div></li>
                  <li><div class="amp-options">200</div></li>
                  <li><div class="amp-options">220</div></li>
                  <li><div class="amp-options">250</div></li>
                  <li><div class="amp-options">270</div></li>
                  <li><div class="amp-options">300</div></li>
                  <li><div class="amp-options">325</div></li>
                  <li><div class="amp-options">330</div></li>
                  <li><div class="last-link">400</div></li>
                </ul>
            </li>
          </ul> 
        </form>

что такое voltInput?

— 17.05.2022 21:08

это для другого поля ввода, извините (для этого не нужно делать никакой работы)

— 17.05.2022 21:09

фокус на входе усилителя

— 17.05.2022 21:10

вместо этого filteredOptions.push(option); попробуйте нажать только значение html: filteredOptions.push(option.innerHTML); Вы можете увидеть, как это работает в консоли.

— 17.05.2022 21:19

Только что внес изменения, и это возвращает значение в консоли при входе в консоль, однако теперь мне каким-то образом нужно получить всплывающее раскрывающееся меню, чтобы отображать только значения, которые начинаются с того, что введено в поле ввода. Если это имеет смысл

— 17.05.2022 21:26

поэтому эти возвращаемые значения должны теперь создавать новый раскрывающийся список, каждый раз, когда что-то еще вводится, снова сужаясь и т. д.

— 17.05.2022 21:28

Я отправил ответ, надеюсь, он поможет.

— 17.05.2022 21:31

html forms javascript autocomplete input

17.05.2022 21:02

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Введение в технологический стек Twitch

В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:

8 полезных HTML-тегов, которые лучше использовать вместо <div>

Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...

HTML5: API локального хранилища (Local Storage)

LocalStorage - это простой способ хранения данных в браузере пользователя.

Доступность HTML - программирование с инклюзивной перспективой

Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...

Именование классов CSS: Конвенция именования BEM

Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете связать пустой элемент datalist с поисковым вводом (я добавил его внизу вашего html-кода). Обратите внимание на атрибут list="suggestions", добавленный к входным данным поиска, который дает указание заполнить поле предложений, выбирая элементы из списка данных.

Затем, при изменении ввода поиска, вы можете динамически сохранять отфильтрованные результаты в виде option элементов списка данных, чтобы ввод поиска отображал окно предложения.

//const voltInput = document.querySelector('.search-input');
const ampInput = document.querySelector('.amp-input');
const ampDropdown = document.querySelector('.amp-dropdown-container');
const ampOptions = document.querySelectorAll('.amp-options');
const suggestions = document.getElementById('suggestions');

ampInput.addEventListener('click', () => {
  ampDropdown.classList.add('amp-dropdown-container--active')
})

ampInput.addEventListener('focusout', (event) => {
  ampDropdown.classList.remove('amp-dropdown-container--active')
});

ampInput.addEventListener('input', onInputChange)

function onInputChange() {
  const value = ampInput.value.toLowerCase();
  const filteredOptions = [];
  suggestions.innerHTML = ''

  ampOptions.forEach((option) => {
    if (option.innerHTML.substr(0, value.length) === value) {
      suggestions.innerHTML += '<option value="' + option.innerHTML + '">'
      filteredOptions.push(option.innerHTML);
    }
  })

  console.log(filteredOptions)
}

<form action="{{ routes.search_url }}" method="get" role="search" autocomplete="off">
          <ul>
            <li id="autocomplete-wrapper">
              <input 
                id="autocomplete-input"
                type="search" 
                list="suggestions"
                placeholder="Amp Hours (aH)" 
                class="amp-input">
                <ul class="amp-dropdown-container">
                  <h5 class="volt-options-title">Top Searches</h5>
                  <li><div class="amp-options">1.3</div></li>
                  <li><div class="amp-options">2.2</div></li>
                  <li><div class="amp-options">3.4</div></li>
                  <li><div class="amp-options">4.5</div></li>
                  <li><div class="amp-options">5</div></li>
                  <li><div class="amp-options">7</div></li>
                  <li><div class="amp-options">8</div></li>
                  <li><div class="amp-options">8.5</div></li>
                  <li><div class="amp-options">9</div></li>
                  <li><div class="amp-options">10</div></li>
                  <li><div class="amp-options">12</div></li>
                  <li><div class="amp-options">14</div></li>
                  <li><div class="amp-options">18</div></li>
                  <li><div class="amp-options">20</div></li>
                  <li><div class="amp-options">22</div></li>
                  <li><div class="amp-options">26</div></li>
                  <li><div class="amp-options">32</div></li>
                  <li><div class="amp-options">33</div></li>
                  <li><div class="amp-options">35</div></li>
                  <li><div class="amp-options">50</div></li>
                  <li><div class="amp-options">55</div></li>
                  <li><div class="amp-options">70</div></li>
                  <li><div class="amp-options">75</div></li>
                  <li><div class="amp-options">100</div></li>
                  <li><div class="amp-options">110</div></li>
                  <li><div class="amp-options">120</div></li>
                  <li><div class="amp-options">155</div></li>
                  <li><div class="amp-options">170</div></li>
                  <li><div class="amp-options">200</div></li>
                  <li><div class="amp-options">220</div></li>
                  <li><div class="amp-options">250</div></li>
                  <li><div class="amp-options">270</div></li>
                  <li><div class="amp-options">300</div></li>
                  <li><div class="amp-options">325</div></li>
                  <li><div class="amp-options">330</div></li>
                  <li><div class="amp-options last-link">400</div></li>
                </ul>
            </li>
          </ul> 
        </form>
        
        
        <datalist id="suggestions"></datalist>

РЕДАКТИРОВАТЬ

Это обновление (согласно комментарию OP) обрабатывает фильтрацию непосредственно в элементе <ul>:

//const voltInput = document.querySelector('.search-input');
const ampInput = document.querySelector('.amp-input');
const ampDropdown = document.querySelector('.amp-dropdown-container');
const ampOptions = document.querySelectorAll('.amp-options');
const suggestions = document.getElementById('suggestions');

ampInput.addEventListener('click', () => {
  ampDropdown.classList.add('amp-dropdown-container--active')
})

ampInput.addEventListener('focusout', (event) => {
  ampDropdown.classList.remove('amp-dropdown-container--active')
});

ampInput.addEventListener('input', onInputChange)

function onInputChange() {
  const value = ampInput.value.toLowerCase();
  const filteredOptions = [];

  ampOptions.forEach((option) => {
    if (option.innerHTML.substr(0, value.length) === value) {
      option.parentElement.classList.remove('hidden')
    } else {
      option.parentElement.classList.add('hidden')
    }
  })
}

.hidden {
  display: none;
}

<form action="{{ routes.search_url }}" method="get" role="search" autocomplete="off">
          <ul>
            <li id="autocomplete-wrapper">
              <input 
                id="autocomplete-input"
                type="search" 
                placeholder="Amp Hours (aH)" 
                class="amp-input">
                <ul class="amp-dropdown-container">
                  <h5 class="volt-options-title">Top Searches</h5>
                  <li><div class="amp-options">1.3</div></li>
                  <li><div class="amp-options">2.2</div></li>
                  <li><div class="amp-options">3.4</div></li>
                  <li><div class="amp-options">4.5</div></li>
                  <li><div class="amp-options">5</div></li>
                  <li><div class="amp-options">7</div></li>
                  <li><div class="amp-options">8</div></li>
                  <li><div class="amp-options">8.5</div></li>
                  <li><div class="amp-options">9</div></li>
                  <li><div class="amp-options">10</div></li>
                  <li><div class="amp-options">12</div></li>
                  <li><div class="amp-options">14</div></li>
                  <li><div class="amp-options">18</div></li>
                  <li><div class="amp-options">20</div></li>
                  <li><div class="amp-options">22</div></li>
                  <li><div class="amp-options">26</div></li>
                  <li><div class="amp-options">32</div></li>
                  <li><div class="amp-options">33</div></li>
                  <li><div class="amp-options">35</div></li>
                  <li><div class="amp-options">50</div></li>
                  <li><div class="amp-options">55</div></li>
                  <li><div class="amp-options">70</div></li>
                  <li><div class="amp-options">75</div></li>
                  <li><div class="amp-options">100</div></li>
                  <li><div class="amp-options">110</div></li>
                  <li><div class="amp-options">120</div></li>
                  <li><div class="amp-options">155</div></li>
                  <li><div class="amp-options">170</div></li>
                  <li><div class="amp-options">200</div></li>
                  <li><div class="amp-options">220</div></li>
                  <li><div class="amp-options">250</div></li>
                  <li><div class="amp-options">270</div></li>
                  <li><div class="amp-options">300</div></li>
                  <li><div class="amp-options">325</div></li>
                  <li><div class="amp-options">330</div></li>
                  <li><div class="amp-options last-link">400</div></li>
                </ul>
            </li>
          </ul> 
        </form>

ааа это так близко! Я добавил изображение того, что происходит после добавления ваших изменений. больший выпадающий список — это оригинальный, который я сделал, а меньший — тот, который был добавлен с вашим кодом. Есть ли способ отобразить этот небольшой список в моем раскрывающемся контейнере? функциональность, кажется, работает правильно со списком

— 17.05.2022 21:51

Хорошо, добавил обновление к моему ответу по вашему запросу.

— 17.05.2022 22:01

вау, не могу отблагодарить вас, я несколько дней рвал на себе волосы, пытаясь понять это. Большое спасибо :)

— 17.05.2022 22:18

17.05.2022 21:30