css js下拉搜索框

在网页设计中，下拉搜索框是一个非常常见的功能。通常，我们会使用CSS和JavaScript来实现这一功能。下面我们来介绍一下如何使用CSS和JavaScript来创建下拉搜索框。

第一步是创建HTML代码。我们需要创建一个input元素，其中type属性设置为text，以便用户可以输入搜索内容。我们还需要添加一个下拉列表，其中列出了搜索建议。以下是示例HTML代码：

<div class="search-box">
  <input type="text" placeholder="Search">
  <ul class="search-suggestions">
    <li>Suggestion 1</li>
    <li>Suggestion 2</li>
    <li>Suggestion 3</li>
  </ul>
</div>

第二步是添加CSS样式到HTML元素。我们需要使用CSS来创建下拉列表。以下是示例CSS代码：

.search-box {
  position: relative;
  display: inline-block;
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
  border: 1px solid #ddd;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

.search-suggestions li {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

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

第三步是添加JavaScript代码到HTML元素。我们需要使用JavaScript来处理用户输入和下拉列表的显示和隐藏。以下是示例JavaScript代码：

var searchInput = document.querySelector('.search-box input');
var suggestionsList = document.querySelector('.search-suggestions');

searchInput.addEventListener('keyup', function() {
  if (searchInput.value !== '') {
    suggestionsList.style.display = 'block';
  } else {
    suggestionsList.style.display = 'none';
  }
});

suggestionsList.addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    searchInput.value = event.target.innerText;
    suggestionsList.style.display = 'none';
  }
});

现在，当用户在输入框中输入内容时，下拉列表将显示可用的搜索建议。用户可以单击任何建议来选择它并将文本插入到输入框中。