如何获取三个HTML5 datalist文本框值，用单SQL查询实现搜索结果展示

首先我先把你未完成的HTML表单补全，确保三个带自动补全的输入框正确关联datalist，并且表单能正确提交到处理页面：

<form class="tg-formtheme tg-formsearch" action="search-results.php" method="POST">
  <fieldset>
    <legend>Search Thousands of verified business</legend>
    <!-- 企业名称输入框 -->
    <div class="form-group">
      <input type="text" name="business_name" list="business-names" placeholder="Enter business name">
      <datalist id="business-names">
        <option value="Acme Corp">
        <option value="Best Bakery">
        <option value="City Auto Repair">
      </datalist>
    </div>
    <!-- 企业分类输入框 -->
    <div class="form-group">
      <input type="text" name="business_category" list="business-categories" placeholder="Enter category">
      <datalist id="business-categories">
        <option value="Technology">
        <option value="Food & Beverage">
        <option value="Automotive">
      </datalist>
    </div>
    <!-- 地理位置输入框 -->
    <div class="form-group">
      <input type="text" name="business_location" list="business-locations" placeholder="Enter location">
      <datalist id="business-locations">
        <option value="New York">
        <option value="Los Angeles">
        <option value="Chicago">
      </datalist>
    </div>
    <button type="submit" class="tg-btn">Search</button>
  </fieldset>
</form>

步骤1：后端处理搜索请求（以PHP为例） #

创建search-results.php页面，负责接收表单参数、执行安全的SQL查询，并准备结果数据。这里必须用预处理语句防止SQL注入，这是核心安全要求！

<?php
// 连接数据库（替换成你的实际数据库信息）
$servername = "localhost";
$username = "your_db_user";
$password = "your_db_pass";
$dbname = "your_db_name";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 获取并清洗表单参数，处理空值情况
$bizName = isset($_POST['business_name']) ? trim($_POST['business_name']) : '';
$bizCategory = isset($_POST['business_category']) ? trim($_POST['business_category']) : '';
$bizLocation = isset($_POST['business_location']) ? trim($_POST['business_location']) : '';

// 动态构建SQL查询，只加入非空的搜索条件
$sql = "SELECT * FROM businesses WHERE 1=1";
$params = [];
$paramTypes = '';

if (!empty($bizName)) {
    $sql .= " AND business_name LIKE ?";
    $params[] = "%$bizName%"; // 用%实现模糊匹配，获取相似结果
    $paramTypes .= 's';
}
if (!empty($bizCategory)) {
    $sql .= " AND business_category LIKE ?";
    $params[] = "%$bizCategory%";
    $paramTypes .= 's';
}
if (!empty($bizLocation)) {
    $sql .= " AND business_location LIKE ?";
    $params[] = "%$bizLocation%";
    $paramTypes .= 's';
}

// 预处理并执行查询
$stmt = $conn->prepare($sql);
if (!empty($paramTypes)) {
    $stmt->bind_param($paramTypes, ...$params);
}
$stmt->execute();
$result = $stmt->get_result();
$matchedBusinesses = $result->fetch_all(MYSQLI_ASSOC);

// 关闭资源
$stmt->close();
$conn->close();
?>

步骤2：在结果页面展示相似结果 #

在search-results.php的HTML部分，循环输出查询到的企业数据，同时做好XSS防护：

<!DOCTYPE html>
<html>
<head>
    <title>Search Results</title>
</head>
<body>
    <h1>Search Results</h1>
    <?php if (count($matchedBusinesses) > 0): ?>
        <div class="business-list">
            <?php foreach ($matchedBusinesses as $biz): ?>
                <div class="business-item">
                    <h3><?php echo htmlspecialchars($biz['business_name']); ?></h3>
                    <p>分类: <?php echo htmlspecialchars($biz['business_category']); ?></p>
                    <p>地点: <?php echo htmlspecialchars($biz['business_location']); ?></p>
                    <p>简介: <?php echo htmlspecialchars($biz['description']); ?></p>
                </div>
            <?php endforeach; ?>
        </div>
    <?php else: ?>
        <p>没有找到匹配的企业，请调整搜索条件重试。</p>
    <?php endif; ?>
</body>
</html>

关键注意事项 #

• SQL注入防护：绝对不能直接把用户输入拼接到SQL语句里，预处理语句是必须的，上面的代码已经严格实现了这一点。
• 模糊匹配逻辑：用LIKE '%关键词%'实现相似结果检索，用户输入部分内容也能匹配到相关企业。
• 空值处理：如果某个输入框为空，SQL会自动跳过该条件，不会出现无效的过滤逻辑。
• XSS防护：用htmlspecialchars()转义输出内容，避免恶意脚本注入。

如果你用其他后端语言（比如Python/Flask、Node.js/Express），核心逻辑完全一致：接收参数→动态构建安全查询→执行查询→展示结果。比如在Flask中可以用SQLAlchemy的查询构建器来实现动态条件，同样要注意参数绑定。

内容的提问来源于stack exchange，提问作者virat121