用html,css,js怎么实现搜索功能
时间: 2024-03-16 12:43:19 浏览: 21
要实现搜索功能,您需要编写HTML、CSS和JavaScript代码,以便在网页上显示搜索框和搜索结果。下面是一个基本的搜索功能的示例代码:
HTML代码:
```html
<div class="search-container">
<form action="">
<input type="text" placeholder="搜索...">
<button type="submit">搜索</button>
</form>
</div>
<div id="search-results"></div>
```
CSS代码:
```css
.search-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
input[type=text] {
width: 70%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
button[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button[type=submit]:hover {
background-color: #45a049;
}
```
JavaScript代码:
```javascript
const searchBox = document.querySelector('input[type="text"]');
const searchResults = document.querySelector('#search-results');
searchBox.addEventListener('keyup', () => {
const searchValue = searchBox.value;
searchResults.innerHTML = '';
if (searchValue.length > 0) {
fetch(`https://api.mysearchapi.com/search?q=${searchValue}`)
.then(response => response.json())
.then(data => {
data.results.forEach(result => {
const resultDiv = document.createElement('div');
resultDiv.innerHTML = `
<a href="${result.url}">
<h2>${result.title}</h2>
</a>
<p>${result.description}</p>
`;
searchResults.appendChild(resultDiv);
});
});
}
});
```
上述代码中,HTML代码创建一个搜索框和一个用于显示搜索结果的空`div`元素。CSS代码将这两个元素进行样式设置。JavaScript代码监听搜索框的`keyup`事件,当用户在搜索框中输入字符时,它会向API发送请求,API会返回与搜索词匹配的结果。然后,JavaScript代码将结果渲染到搜索结果的`div`元素中。
请注意,上述JavaScript代码中的API仅用于示例。您需要将其替换为您自己的API,以便在您的网站上实现搜索功能。