Html5输入框查询

原创

mob649e81597922 2024-11-27 07:12:12 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81597922的原创作品，请联系作者获取转载授权，否则将追究法律责任

Html5输入框查询的实现指南

在Web开发中，输入框用于接收用户输入的数据。实现一个简单的查询功能，可以让用户通过输入框搜索特定信息。本文将会详细介绍如何使用HTML5、CSS和JavaScript创建一个输入框查询功能的步骤。

流程概述

下面是实现Html5输入框查询的总体步骤：

步骤	描述
1	设计HTML结构
2	添加样式（CSS）
3	编写JavaScript查询逻辑
4	测试和优化

接下来，我们将详细介绍每一个步骤及其相关代码。

1. 设计HTML结构

首先，我们需要构建基础的HTML结构。创建一个包含输入框和查询按钮的简单页面。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框查询示例</title>
    <link rel="stylesheet" href="style.css"> <!-- 引入CSS样式 -->
</head>
<body>
    <div class="container">
        查询示例
        <input type="text" id="searchInput" placeholder="请输入查询内容..."> <!-- 输入框 -->
        <button id="searchButton">查询</button> <!-- 查询按钮 -->
        <ul id="results"></ul> <!-- 用于显示查询结果的列表 -->
    </div>
    <script src="script.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>

此代码的作用：

创建一个基础的网页结构。
包含了一个文本输入框和一个查询按钮。
通过ul标签形成一个用于展示查询结果的列表。

2. 添加样式（CSS）

接下来，我们为输入框和按钮添加一些简单的样式，使其更加美观。

/* style.css */
body {
    font-family: Arial, sans-serif; /* 设置字体 */
    background-color: #f4f4f4; /* 页面背景色 */
    margin: 0; /* 清除默认margin */
    padding: 20px; /* 页面内边距 */
}

.container {
    width: 400px; /* 设置容器宽度 */
    margin: auto; /* 居中显示 */
    background: white; /* 容器背景色 */
    padding: 20px; /* 内边距 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

input[type="text"] {
    width: calc(100% - 22px); /* 设置宽度以适应容器 */
    padding: 10px; /* 内边距 */
    margin-bottom: 10px; /* 下边距 */
    border: 1px solid #ccc; /* 边框颜色 */
    border-radius: 4px; /* 圆角边框 */
}

button {
    width: 100%; /* 按钮宽度 */
    padding: 10px; /* 内边距 */
    border: none; /* 无边框 */
    background-color: #5cb85c; /* 背景色 */
    color: white; /* 字体颜色 */
    border-radius: 4px; /* 圆角边框 */
    cursor: pointer; /* 鼠标指针类型 */
}

button:hover {
    background-color: #4cae4c; /* 鼠标悬停变色 */
}

此代码的作用：

设置了网页的基本样式，包括字体、背景和元素的排版。
为输入框和按钮设置了样式和效果，使其更加美观。

3. 编写JavaScript查询逻辑

现在，让我们来写JavaScript代码，处理输入框中的内容并实现查询功能。

// script.js
document.getElementById('searchButton').onclick = function() {
    // 获取输入框中的值
    var input = document.getElementById('searchInput').value.trim();
    
    // 清空之前的结果
    var resultsList = document.getElementById('results');
    resultsList.innerHTML = '';

    // 模拟数据源
    var data = ['apple', 'banana', 'orange', 'grape', 'strawberry'];

    // 遍历数据源进行查询
    data.forEach(function(item) {
        // 如果输入的内容在数据项中，则显示在结果列表中
        if (item.toLowerCase().includes(input.toLowerCase()) && input !== '') {
            var listItem = document.createElement('li'); // 创建新的列表项
            listItem.textContent = item; // 设置文本内容
            resultsList.appendChild(listItem); // 将列表项添加到结果列表中
        }
    });
};

此代码的作用：

当用户点击“查询”按钮时，会获取输入框的内容。
我们模拟了一个数据源，进行逐项匹配并显示匹配结果。
结果会以列表的形式展示在页面上。

4. 测试和优化

在完成以上步骤后，可以在浏览器中打开HTML文件进行测试。
输入不同的内容，确认查询效果是否符合预期。
对于没有结果的情况，实现友好的提示信息。

实体关系图

我们可以通过以下代码来创建一个简单的实体关系图：

erDiagram
    USER {
        string name
        string email
        string password
    }
    PRODUCT {
        string name
        float price
        int stock
    }
    ORDER {
        int orderID
        date orderDate
    }
    USER ||--o{ ORDER : places
    ORDER ||--|{ PRODUCT : contains

状态图

下面是一个简单的状态图，展示查询的不同状态：

stateDiagram
    [*] --> Idle
    Idle --> Searching : 用户点击查询
    Searching --> ResultAvailable : 查询成功
    Searching --> NoResult : 查询无结果
    ResultAvailable --> Idle : 用户清空查询
    NoResult --> Idle : 用户清空查询