如何实现点击筛选按钮后跳转新页面并展示输入与筛选结果？

Let's break this down into two straightforward parts: passing the user's input to the results page, and then displaying that input alongside the filtered results on the new page.

Step 1: Update Your Original Page to Redirect with the Filter Query #

First, modify your existing filter button's click handler to send the user's input to the results page using a URL query parameter. This is a simple, frontend-only way to pass small data between pages without needing backend code.

Here's how your original page's code might look:

<!-- Original Page (e.g., index.html) -->
<input type="text" id="myInput" placeholder="Enter filter term...">
<button id="filterBtn">Filter & View Results</button>

<script>
document.getElementById('filterBtn').addEventListener('click', function() {
  // Grab the user's input and clean up whitespace
  const userInput = document.getElementById('myInput').value.trim();
  
  // Optional: Prevent redirect if input is empty
  if (!userInput) {
    alert('Please enter a filter term first!');
    return;
  }

  // Redirect to results page, encoding input to handle special characters
  window.location.href = `results.html?query=${encodeURIComponent(userInput)}`;
});
</script>

• encodeURIComponent() ensures spaces, symbols, and special characters are handled correctly in the URL.
• We're using the query parameter query to carry the input value—feel free to rename this to something more specific to your project.

Step 2: Build the Results Page to Show Input & Filtered Content #

On the results page (e.g., results.html), we need to:

1. Pull the query parameter from the URL.
2. Display the user's input clearly.
3. Run your existing filtering logic using that input.

Here's a complete example of the results page:

<!-- Results Page (results.html) -->
<h2>Filter Results</h2>
<p>Your search: <span id="userQuery" style="font-weight: bold;"></span></p>

<!-- Your existing list of items to filter -->
<ul id="itemList">
  <li>Red Apple</li>
  <li>Yellow Banana</li>
  <li>Dark Cherry</li>
  <li>Brown Date</li>
</ul>

<script>
// Extract the query parameter from the URL
const urlParams = new URLSearchParams(window.location.search);
const searchQuery = urlParams.get('query') || '';

// Show the user's input on the page
document.getElementById('userQuery').textContent = searchQuery;

// Adapt your existing filtering logic here
function filterItems(query) {
  const items = document.querySelectorAll('#itemList li');
  
  items.forEach(item => {
    // Adjust this condition to match your original filtering rules
    if (item.textContent.toLowerCase().includes(query.toLowerCase())) {
      item.style.display = 'block'; // Show matching items
    } else {
      item.style.display = 'none'; // Hide non-matching items
    }
  });
}

// Run the filter as soon as the page loads
filterItems(searchQuery);
</script>

Key Details: #

• URLSearchParams is a modern browser API that simplifies reading query parameters—no messy string parsing required.
• If someone lands on the results page directly (without using the filter button), searchQuery defaults to an empty string, so all items will be shown.
• Modify the filterItems function to match your original filtering logic (e.g., if you filter by data attributes instead of text content, adjust the condition accordingly).

Quick UX Improvements #

• Case Insensitivity: The example uses toLowerCase() to make the filter case-insensitive—remove this if you want strict case matching.
• Loading State: If your filter handles large datasets, add a loading spinner while results are processed (optional but improves UX).

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