H5+css3+js实现搜索框下拉列表
时间: 2023-07-30 14:04:33 浏览: 106
好的,以下是一个基本的搜索框下拉列表的实现步骤:
1. HTML结构:在HTML中创建一个输入框和一个下拉列表的容器,下拉列表的容器初始设置为隐藏状态。
```html
<div class="search-container">
<input type="text" placeholder="请输入搜索关键字">
<div class="search-list-container">
<ul class="search-list"></ul>
</div>
</div>
```
2. CSS样式:设置输入框的样式和下拉列表容器的样式,下拉列表容器的初始状态设置为 `display:none` 。
```css
.search-container {
position: relative;
}
input[type="text"] {
width: 300px;
height: 30px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.search-list-container {
position: absolute;
top: 35px;
left: 0;
z-index: 99;
width: 300px;
max-height: 200px;
overflow-y: auto;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
display: none;
}
```
3. JS交互:监听输入框的键盘输入事件,在输入框中输入内容时,向后台发送请求获取匹配的搜索结果,将结果渲染到下拉列表中,并将下拉列表容器设置为显示状态。
```javascript
const input = document.querySelector('input[type="text"]');
const searchListContainer = document.querySelector('.search-list-container');
const searchList = document.querySelector('.search-list');
input.addEventListener('input', function(e) {
const keyword = e.target.value;
if (keyword.trim()) {
// 发送请求获取匹配的搜索结果
const searchResults = getSearchResults(keyword);
renderSearchList(searchResults);
searchListContainer.style.display = 'block';
} else {
searchList.innerHTML = '';
searchListContainer.style.display = 'none';
}
});
function getSearchResults(keyword) {
// 向后台发送请求获取搜索结果
const results = ['搜索结果1', '搜索结果2', '搜索结果3'];
return results;
}
function renderSearchList(results) {
let html = '';
results.forEach(result => {
html += `<li>${result}</li>`;
});
searchList.innerHTML = html;
}
```
以上就是一个简单的搜索框下拉列表的实现方法,您可以根据自己的需求进行样式和交互的修改。