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（）？

- ＆GT; 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。

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

1 个答案: