如何制作自動完成輸入欄位下拉選單-有解無憂

我有一個輸入欄位，當用戶單擊它并開始輸入時，我需要一個下拉選單來顯示以輸入內容開頭的所有下拉選項。我已經擁有了大部分功能，我只是不知道如何讓它通過陣列過濾并只顯示相關選項。

如何制作自動完成輸入欄位下拉選單

    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>

uj5u.com熱心網友回復：

您可以將一個空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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/476628.html

標籤：javascript html 形式输入自动完成

上一篇：onclick按鈕切換圖示在reactjs中不起作用

下一篇：我只想按照第一個字母的字母順序對陣列中的單詞進行排序，然后根據我給定的與第一個字母匹配的模式按第二個字母排序