如何在导航栏中使用自动完成功能导入下拉菜单

在导航栏中使用自动完成功能导入下拉菜单，可以通过以下步骤实现：

HTML结构：在导航栏的HTML代码中，添加一个带有下拉菜单的输入框。例如：

<div class="navbar">
  <input type="text" id="search" placeholder="搜索...">
  <div class="dropdown">
    <ul id="dropdown-list">
      <!-- 下拉菜单选项 -->
    </ul>
  </div>
</div>

CSS样式：使用CSS样式来美化导航栏和下拉菜单的外观。例如：

.navbar {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
}

.dropdown ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
  border: 1px solid #ccc;
}

.dropdown li {
  padding: 10px;
}

.dropdown li:hover {
  background-color: #f5f5f5;
}

JavaScript代码：使用JavaScript来实现自动完成功能和下拉菜单的交互。例如：

const searchInput = document.getElementById('search');
const dropdownList = document.getElementById('dropdown-list');

searchInput.addEventListener('input', function() {
  const keyword = this.value.toLowerCase();
  const filteredOptions = options.filter(option => option.toLowerCase().includes(keyword));

  dropdownList.innerHTML = '';

  filteredOptions.forEach(option => {
    const li = document.createElement('li');
    li.textContent = option;
    dropdownList.appendChild(li);
  });

  if (filteredOptions.length > 0) {
    dropdownList.style.display = 'block';
  } else {
    dropdownList.style.display = 'none';
  }
});

searchInput.addEventListener('focusout', function() {
  dropdownList.style.display = 'none';
});

dropdownList.addEventListener('click', function(event) {
  const selectedOption = event.target.textContent;
  searchInput.value = selectedOption;
  dropdownList.style.display = 'none';
});

以上代码实现了以下功能：