用javascript实现站内搜索
时间: 2024-06-20 18:04:16 浏览: 6
用 JavaScript 实现站内搜索需要用到以下几个步骤:
1. 获取用户输入的关键词。
2. 遍历需要搜索的内容,比如文章标题、摘要、正文等。
3. 对于每个内容进行字符串匹配,判断是否包含关键词。
4. 如果包含关键词,则将该内容展示在搜索结果中。
以下是一个简单的实现示例:
HTML 代码:
```html
<input type="text" id="searchInput" placeholder="请输入关键词">
<button id="searchBtn">搜索</button>
<div id="searchResult"></div>
```
JavaScript 代码:
```javascript
var articles = [
{ title: "JavaScript 入门教程", content: "JavaScript 是一门脚本语言,可以用于网页开发" },
{ title: "JavaScript 高级教程", content: "JavaScript 还可以用于游戏开发、移动应用开发等" },
{ title: "HTML 教程", content: "HTML 是网页的基础语言,用于定义网页结构" },
{ title: "CSS 教程", content: "CSS 用于美化网页,可以设置字体、颜色、布局等" }
];
document.getElementById("searchBtn").addEventListener("click", function() {
var keyword = document.getElementById("searchInput").value;
var resultHtml = "";
for (var i = 0; i < articles.length; i++) {
if (articles[i].title.indexOf(keyword) >= 0 || articles[i].content.indexOf(keyword) >= 0) {
resultHtml += "<p>" + articles[i].title + "</p>";
resultHtml += "<p>" + articles[i].content + "</p>";
}
}
document.getElementById("searchResult").innerHTML = resultHtml;
});
```
相关推荐
![](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)