从本地 MySQL 数据库中搜索数据 - 构建搜索框和按钮 - 常规

要实现从本地电脑的 MySQL 数据库中搜索所需数据，可以按照以下步骤进行操作：

创建一个 HTML 页面，包含一个搜索框和一个按钮。 例如：

<!DOCTYPE html>
<html>
<head>
    <title>搜索页面</title>
</head>
<body>
    <input type="text" id="search" placeholder="请输入搜索关键字">
    <button onclick="searchData()">搜索</button>
    <div id="result"></div>
</body>
</html>

在 JavaScript 中编写搜索函数。 通过 Ajax 请求向后端发送搜索请求，并将搜索结果显示在页面上。例如：

function searchData() {
    var keyword = document.getElementById("search").value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "search.php?keyword=" + keyword, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = JSON.parse(xhr.responseText);
            var output = "";
            for (var i = 0; i < result.length; i++) {
                output += "<p>" + result[i].name + "</p>";
            }
            document.getElementById("result").innerHTML = output;
        }
    };
    xhr.send();
}

在后端创建一个 PHP 文件（例如 search.php），接收前端传递的关键字，查询数据库并返回结果。 例如：

<?php
$keyword = $_GET["keyword"];

// 连接数据库
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);

// 查询数据库
$sql = "SELECT * FROM table WHERE name LIKE '%$keyword%'";
$result = $conn->query($sql);

// 将查询结果转换为 JSON 格式返回给前端
$data = array();
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}
echo json_encode($data);

$conn->close();
?>

以上是一个简单的示例，可以根据实际情况进行适当的修改和优化。同时，需要确保本地电脑已经安装并正确配置了 MySQL 数据库。