帮我写js写一个搜索检引功能
时间: 2024-06-12 11:05:58 浏览: 14
好的,以下是一个简单的搜索引擎功能的示例代码:
HTML:
```html
<input type="text" id="searchInput" placeholder="搜索">
<button id="searchBtn">搜索</button>
<ul id="searchResults">
</ul>
```
JS:
```javascript
// 获取输入框和按钮元素
var searchInput = document.getElementById('searchInput');
var searchBtn = document.getElementById('searchBtn');
// 获取搜索结果列表元素
var searchResults = document.getElementById('searchResults');
// 监听按钮点击事件
searchBtn.addEventListener('click', function() {
// 获取搜索关键词
var keyword = searchInput.value;
// 清空搜索结果列表
searchResults.innerHTML = '';
// 遍历数据源,查找匹配项
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (item.title.indexOf(keyword) > -1 || item.content.indexOf(keyword) > -1) {
// 创建搜索结果列表项
var li = document.createElement('li');
li.innerHTML = '<a href="' + item.url + '">' + item.title + '</a>';
searchResults.appendChild(li);
}
}
});
// 模拟数据源
var data = [
{
title: 'JavaScript 教程',
content: '这是一篇 JavaScript 教程的内容,包括基础语法和高级应用。',
url: 'http://example.com/js-tutorial'
},
{
title: 'HTML5 新特性',
content: '这是一篇介绍 HTML5 新特性的文章,包括 Canvas、Web Workers 等。',
url: 'http://example.com/html5-features'
},
{
title: 'CSS 美化技巧',
content: '这是一篇介绍 CSS 美化技巧的文章,包括样式选择器、盒子模型等。',
url: 'http://example.com/css-tips'
},
// ...
];
```
这个示例代码主要实现了以下功能:
1. 监听搜索按钮点击事件,获取输入框中的关键词。
2. 遍历数据源,查找包含关键词的文章并创建搜索结果列表项。
3. 显示搜索结果列表。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)