当前位置： 文江博客话题详情

如何使自动完成输入字段下拉列表

发布于 2025-01-30 06:37:06 字数 4917 浏览 2 评论 0原文

我有一个输入字段，当用户单击它并开始键入时，我需要下拉以显示以显示以键入内容开头的所有下拉选项。我已经拥有大多数功能，我只是无法弄清楚如何使其通过数组过滤并仅显示相关选项。

    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>

原文

I have an input field which when a user clicks into it and begins typing, i need a dropdown to show up which displays all the dropdown options that begin with what is being typed. I have most of the functionality already I just cant figure out how to get it to filter through the array and display only the relevant options.

enter image description here

    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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

苏别ゝ 2025-02-06 06:37:06

您可以将一个空的Datalist元素与搜索输入相关联（我将其添加到HTML代码的底部）。请注意属性list =“建议”添加到搜索输入中，该指示其填充数据库中的建议框。

然后，在搜索输入更改时，您可以以option element elements的元素动态存储过滤后的结果，从而使搜索输入显示一个建议框。

//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的注释）直接在＆lt; ul＆gt;元素上处理过滤：

//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>

You can associate an empty datalist element to to the search input (I added it on bottom of your html code). Note the attribute list="suggestions" added to the search input, which instructs it to populate a suggestion box picking elements from the datalist.

Then, on search input change, you can store your filtered results dynamically as option elements of the datalist, making the search input show a suggestion box.

//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>

  • EDIT

This update (per OP's comment) handles the filtering directly on the <ul> element:

//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>

回复 原文
~没有更多了~

关于作者

半世晨晓

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文