使用 HTML、CSS 和 JavaScript 的搜索栏

简介

在Web应用程序中，搜索栏是非常常见的元素。它允许用户在网站上查找他们需要的内容。一旦用户输入搜索词，应用程序就会返回相关的结果。在本文中，我们将学习如何在网页上实现搜索栏，以便用户可以搜索我们的网站。

HTML 的搜索栏

下面是一个基本的 HTML 搜索栏。

<form>
    <input type="text" placeholder="输入搜索内容">
    <button type="submit">搜索</button>
</form>

<form> 标签是一个容器，包含要提交的表单数据的所有元素。在本例中，搜索栏有两个元素：一个文本框和一个提交按钮。

<input> 标签用于创建文本框或其他表单控件。上例中使用 type="text" 创建了文本框，并在占位符 placeholder 中显示了一些示例文本。

<button> 标签用于创建提交按钮。在本例中，按钮上显示了“搜索”文本。

CSS 的搜索栏

要添加 CSS 样式，请在 <style> 标签内添加样式。下面是一个基本的 CSS 搜索栏。

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: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #45a049;
}

上面的 CSS 样式包括了搜索框和提交按钮的基本样式。搜索框使用了 border 属性来添加边框，并使用 padding 属性来增加内边距。提交按钮使用了 background-color 和 color 属性来设置按钮的背景颜色和字体颜色。

上面的样式还提供了了一些鼠标交互状态，例如鼠标悬浮在提交按钮上时的 hover 样式。

JavaScript 的搜索栏

我们可以使用 JavaScript 添加一些额外的功能，例如即时搜索（每次用户在搜索框中输入内容时都会自动搜索匹配项）和错误处理（如果在搜索和提交表单期间出现任何错误，则向用户显示错误消息）。

在这里，我们将介绍一种基于 JavaScript 的搜索栏引擎——Elasticlunr。它是用于浏览程序的客户端端全文搜索引擎。使用 Elasticlunr，可以根据用户输入的搜索词，搜索相关的网站内容，将搜索结果展示给用户。

在这里，我们仅仅提供 Elasticlunr 的使用方法。大家可以了解更多关于 Elasticlunr 的知识访问官方文档。

var index = elasticlunr(function () {
    this.addField('title');
    this.addField('category');
    this.addField('content');
    this.setRef('id');
});

var documents = [
    {
        "id": 1,
        "title": "JavaScript教程",
        "category": "编程",
        "content": "JavaScript是一种用于网页动态交互的编程语言"
    },
    {
        "id": 2,
        "title": "CSS教程",
        "category": "设计",
        "content": "CSS是一种用于网页样式控制的语言"
    },
    {
        "id": 3,
        "title": "HTML教程",
        "category": "设计",
        "content": "HTML是一种用于网页结构定义的语言"
    },
];

documents.forEach(function(doc) {
    index.addDoc(doc)
});

function search() {
    var query = document.getElementById('search-box').value;
    var results = index.search(query);
    var resultString = '';
    results.forEach(function(result) {
        var item = documents[result.ref];
        resultString += '<li>' + item.title + '</li>';
    });
    document.getElementById('search-results').innerHTML = resultString;
}

上面的 JavaScript 代码使用 Elasticlunr 实现了即时搜索。在代码中，我们首先创建了一个空白的 Elasticlunr 索引。我们指定了要搜索的字段，并将 id 用作索引的参考。接下来，我们将文档添加到索引中，并在表单提交之后使用查询字符串搜索。

最后，我们将搜索结果呈现为 HTML 列表。

总结

本文介绍了使用 HTML、CSS 和 JavaScript 创建搜索栏的方法。我们提供了一些基本的 HTML 和 CSS，以及使用 Elasticlunr 添加搜索功能的 JavaScript 示例。希望它可以为您的下一个 Web 应用程序提供起点。