请你作为网页程序员,写出搜索引擎的部分代码,要求:搜索栏输入,按钮搜索,显示在一个区域里
时间: 2024-03-25 21:36:53 浏览: 39
一个搜索引擎的程序代码
好的,以下是一个简单的示例代码:
HTML部分:
```html
<form>
<input type="text" id="search-input" placeholder="请输入搜索关键字">
<button type="submit" id="search-btn">搜索</button>
</form>
<div id="search-results"></div>
```
CSS部分:
```css
#search-input {
width: 300px;
height: 30px;
border: 1px solid #ccc;
padding: 5px;
font-size: 16px;
}
#search-btn {
height: 30px;
background-color: #007bff;
color: #fff;
border: none;
padding: 5px 10px;
font-size: 16px;
cursor: pointer;
}
#search-results {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
}
```
JavaScript部分:
```javascript
const searchForm = document.querySelector('form');
const searchInput = document.querySelector('#search-input');
const searchBtn = document.querySelector('#search-btn');
const searchResults = document.querySelector('#search-results');
searchForm.addEventListener('submit', e => {
e.preventDefault();
const keyword = searchInput.value;
searchResults.innerHTML = `正在搜索关键字:${keyword}...`;
// 在这里进行搜索操作,获取搜索结果并显示在searchResults中
});
```
需要注意的是,这只是一个简单的示例代码,实际上搜索引擎的实现需要考虑很多因素,比如搜索算法、搜索结果的排序、搜索结果的分页等等。
阅读全文