如何实现初始隐藏的Business/Individual按钮随搜索显示并分类查询

Here's a practical, step-by-step implementation that meets your requirements:

1. HTML Structure #

First, set up your HTML with the search input, main search button, hidden category buttons, and a results container. The category buttons are hidden initially using inline CSS (you can move this to an external stylesheet for cleaner code):

<!-- Search Input & Main Button -->
<div class="search-container">
  <input type="text" id="searchQuery" placeholder="Type your search term..." required>
  <button id="mainSearchBtn">Search</button>
</div>

<!-- Category Buttons (Hidden by Default) -->
<div id="categoryButtons" style="display: none; margin: 10px 0;">
  <button id="businessBtn">Business</button>
  <button id="individualBtn">Individual</button>
</div>

<!-- Results Display Area -->
<div id="results"></div>

2. JavaScript for Button Visibility & AJAX Requests #

Use vanilla JavaScript to handle button clicks, send search requests to your PHP backend, and update the UI. This avoids relying on external libraries like jQuery:

document.addEventListener('DOMContentLoaded', function() {
  // Get DOM elements
  const mainSearchBtn = document.getElementById('mainSearchBtn');
  const categoryButtons = document.getElementById('categoryButtons');
  const businessBtn = document.getElementById('businessBtn');
  const individualBtn = document.getElementById('individualBtn');
  const searchQuery = document.getElementById('searchQuery');
  const resultsDiv = document.getElementById('results');

  // Helper function to send search requests
  function sendSearchRequest(category) {
    const query = searchQuery.value.trim();
    if (!query) {
      alert('Please enter a search term first!');
      return;
    }

    // Send POST request to PHP
    fetch('search.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `query=${encodeURIComponent(query)}&category=${encodeURIComponent(category)}`
    })
    .then(response => response.text())
    .then(data => {
      resultsDiv.innerHTML = data;
    })
    .catch(error => {
      console.error('Search error:', error);
      resultsDiv.innerHTML = '<p>Oops! Something went wrong with the search.</p>';
    });
  }

  // Main search button click handler
  mainSearchBtn.addEventListener('click', function() {
    sendSearchRequest('all');
    // Show category buttons after initial search
    categoryButtons.style.display = 'inline-block';
  });

  // Business category button click handler
  businessBtn.addEventListener('click', function() {
    sendSearchRequest('business');
  });

  // Individual category button click handler
  individualBtn.addEventListener('click', function() {
    sendSearchRequest('individual');
  });
});

3. PHP Backend for Database Queries #

Create a search.php file that connects to your database, processes the search request, and returns formatted results. Note: Replace the database credentials and table/column names with your actual setup:

<?php
// Database connection details (update these!)
$servername = "localhost";
$dbUsername = "your_db_user";
$dbPassword = "your_db_password";
$dbName = "your_database_name";

// Establish database connection
$conn = new mysqli($servername, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

// Sanitize input to prevent SQL injection (prepared statements are safer!)
$searchQuery = isset($_POST['query']) ? $conn->real_escape_string($_POST['query']) : '';
$category = isset($_POST['category']) ? $conn->real_escape_string($_POST['category']) : 'all';

// Prepare SQL query based on category
if ($category === 'all') {
  $sql = "SELECT * FROM your_table WHERE your_search_column LIKE '%$searchQuery%'";
} else {
  $sql = "SELECT * FROM your_table WHERE your_search_column LIKE '%$searchQuery%' AND category = '$category'";
}

// Execute query
$result = $conn->query($sql);

// Generate results HTML
if ($result->num_rows > 0) {
  while ($row = $result->fetch_assoc()) {
    // Customize this output to match your data structure
    echo "<div class='result-card'>";
    echo "<h4>" . htmlspecialchars($row['title']) . "</h4>";
    echo "<p>" . htmlspecialchars($row['description']) . "</p>";
    echo "<span class='category-tag'>" . ucfirst($row['category']) . "</span>";
    echo "</div>";
  }
} else {
  echo "<p>No results found matching your query.</p>";
}

// Close database connection
$conn->close();
?>

Key Notes for Improvement #

• Security Upgrade: Replace real_escape_string with prepared statements to better protect against SQL injection. Here's a quick example of how to modify the PHP query:

  if ($category === 'all') {
    $stmt = $conn->prepare("SELECT * FROM your_table WHERE your_search_column LIKE ?");
    $likeQuery = "%$searchQuery%";
    $stmt->bind_param("s", $likeQuery);
  } else {
    $stmt = $conn->prepare("SELECT * FROM your_table WHERE your_search_column LIKE ? AND category = ?");
    $likeQuery = "%$searchQuery%";
    $stmt->bind_param("ss", $likeQuery, $category);
  }
  $stmt->execute();
  $result = $stmt->get_result();
  

• Styling: Add CSS to make the buttons and results look better (e.g., padding, colors, hover effects).
• Error Handling: Expand error handling in both JavaScript and PHP to provide more user-friendly messages.

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