用 JS CSS HTML 帮我写一个百度下拉框
时间: 2024-03-29 22:09:41 浏览: 21
好的,以下是一个简单的百度下拉框示例:
HTML代码:
```
<div class="search-box">
<input type="text" id="search-input" placeholder="请输入搜索关键词">
<ul id="search-list"></ul>
</div>
```
CSS代码:
```
.search-box {
position: relative;
}
#search-input {
width: 300px;
height: 40px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
}
#search-list {
position: absolute;
top: 50px;
left: 0;
width: 300px;
max-height: 200px;
overflow-y: auto;
background-color: #fff;
border: 1px solid #ccc;
border-top: none;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
#search-list li {
padding: 5px 10px;
cursor: pointer;
}
#search-list li:hover {
background-color: #f5f5f5;
}
```
JS代码:
```
const searchInput = document.getElementById('search-input');
const searchList = document.getElementById('search-list');
searchInput.addEventListener('input', function() {
const keyword = this.value.trim();
if (keyword) {
const script = document.createElement('script');
script.src = `https://www.baidu.com/su?wd=${keyword}&cb=handleData`;
document.body.appendChild(script);
} else {
searchList.innerHTML = '';
searchList.style.display = 'none';
}
});
function handleData(data) {
const listData = data.s;
let html = '';
for (let i = 0; i < listData.length; i++) {
html += `<li>${listData[i]}</li>`;
}
searchList.innerHTML = html;
searchList.style.display = 'block';
}
document.addEventListener('click', function(e) {
if (e.target !== searchInput) {
searchList.style.display = 'none';
}
});
```
这段代码会监听输入框的输入事件,当输入框中有内容时,会通过动态创建 script 标签的方式向百度搜索接口发送请求,获取搜索建议数据,然后将数据渲染到下拉框中。当输入框中没有内容或者点击页面其他位置时,下拉框会隐藏。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)