javascript - 自动完成下拉菜单 - 添加时间延迟并等待至少输入 3 个字符

Question

我想用纯 JavaScript 创建自己的自动完成下拉列表，我从下面的代码开始(它来自使用 jquery 的另一个答案)，

我希望检查不要立即开始，而是在一段时间后，仅当用户输入至少 3 个字符时才开始。

 inputString.onkeyup = function() {
            //toUpperCase to make it case insensitive
        var filter = $(this).val().toUpperCase()
        //loop through all the lis 
        for (var i = 0; i < eachStudent.length; i++) {
            //Do this for all the elements (h3, email, joined-details, date)
            var name = $(eachStudent[i]).find('h3').text()
            //display all the results where indexOf() does not return -1
            if (name.toUpperCase().indexOf(filter) != -1)
                eachStudent[i].style.display = 'list-item';
            else
                eachStudent[i].style.display = 'none';
        }
    }

如果我想按顺序从文本的开头进行检查，我应该使用什么来代替indexOf()？

->indexOf() 返回任何地方出现的位置(例如字符串的中间)。我只想从字符串的开头搜索以减少更多不相关的结果

Answer 1

您可以使用.startsWith()。根据您粘贴的代码片段，搜索列表似乎是从 DOM 元素填充的。这是一个执行此操作的示例，我在 JS 中添加了注释来解释发生的情况:

const input = document.querySelector('input')
const list = document.querySelectorAll('.words li')
const listArray = []

// create array from HTML list
list.forEach(item => {
  // convert to uppercase so we aren't case sensitive
  const searchableItem = item.innerText.toUpperCase()
  listArray.push(searchableItem)
})

// add event listener for search
input.addEventListener('keyup', e => {
  // grab the value of the input field to test against
  // again convert to uppercase so we aren't case sensitive
  let search = e.target.value.toUpperCase()

  // if user has inputted 3 or more characters
  if (search.length > 2) {
    // compare our created listArray with the input value
    let results = listArray.filter(result => result.startsWith(search))

    // show if it's a match otherwise hide
    list.forEach(item => {
      if (item.innerText.toUpperCase().startsWith(search)) {
        item.style.display = 'block'
      } else {
        item.style.display = 'none'
      }
    })
  } else {
    // otherwise hide everything if less than 3 characters are inputted
    list.forEach(item => item.style.display = 'none')
  }
})

.words ul li {
  display: none;
}

<h1>Search an American State</h1>
<div class="container">
  <div class="search">
    <input type="text" placeholder="Search state here">
  </div>
  <div class="words">
    <ul>
      <li>Alabama</li>
      <li>Alaska</li>
      <li>Arizona</li>
      <li>Arkansas</li>
      <li>California</li>
      <li>Colorado</li>
      <li>Connecticut</li>
      <li>Delaware</li>
      <li>Florida</li>
      <li>Georgia</li>
      <li>Hawaii</li>
      <li>Idaho</li>
      <li>Illinois</li>
      <li>Indiana</li>
      <li>Iowa</li>
      <li>Kansas</li>
      <li>Kentucky</li>
      <li>Louisiana</li>
      <li>Maine</li>
      <li>Maryland</li>
      <li>Massachusetts</li>
      <li>Michigan</li>
      <li>Minnesota</li>
      <li>Mississippi</li>
      <li>Missouri</li>
      <li>Montana</li>
      <li>Nebraska</li>
      <li>Nevada</li>
      <li>New Hampshire</li>
      <li>New Jersey</li>
      <li>New Mexico</li>
      <li>New York</li>
      <li>North Carolina</li>
      <li>North Dakota</li>
      <li>Ohio</li>
      <li>Oklahoma</li>
      <li>Oregon</li>
      <li>Pennsylvania</li>
      <li>Rhode Island</li>
      <li>South Carolina</li>
      <li>South Dakota</li>
      <li>Tennessee</li>
      <li>Texas</li>
      <li>Utah</li>
      <li>Vermont</li>
      <li>Virginia</li>
      <li>Washington</li>
      <li>West Virginia</li>
      <li>Wisconsin</li>
      <li>Wyoming</li>
    </ul>
  </div>
</div>

如果您希望列表完全可见并从那里向下过滤，请删除 CSS 行并将第 31 行上的 none 替换为 block。