React中基于不同字段的多文本输入过滤实现咨询

Hey there! Let's work through implementing that multi-input card filtering feature you need. I’ll share a practical, easy-to-maintain approach that handles empty inputs and multi-condition matching exactly as you described.

The key rule here is:

• If an input is empty, it doesn’t affect the filter (all cards pass this condition)
• If an input has content, only cards where the corresponding field contains the input string are kept
• When multiple inputs are filled, a card must match all non-empty conditions to be displayed

1. Define Your Card Data Structure #

First, let’s assume your card data is stored as an array of objects (adjust fields to match your actual data):

const cards = [
  { title: "Bohemian Rhapsody", composer: "Freddie Mercury", genre: "Rock" },
  { title: "Imagine", composer: "John Lennon", genre: "Pop" },
  { title: "Hey Jude", composer: "Paul McCartney", genre: "Pop" },
  // Add more card entries here...
];

2. Build a Reusable Filter Function #

This function will take your full card list and the current filter values, then return the matching cards. It uses every() to ensure all non-empty conditions are satisfied:

function filterCards(cards, filters) {
  return cards.filter(card => {
    // Check every filter condition
    return Object.entries(filters).every(([field, inputValue]) => {
      // Skip empty inputs (they don't filter anything)
      if (!inputValue.trim()) return true;
      // Case-insensitive match (adjust to case-sensitive if needed)
      return card[field].toLowerCase().includes(inputValue.trim().toLowerCase());
    });
  });
}

Note: The toLowerCase() makes the filter case-insensitive, which is usually better for user experience—you can remove it if you need exact case matching.

3. Connect Inputs to Filtering #

Now, link your input fields to the filter function so changes trigger real-time updates. Here’s a vanilla JS example with HTML:

HTML Inputs & Card Container

<!-- Filter inputs -->
<input type="text" id="titleFilter" placeholder="Search title...">
<input type="text" id="composerFilter" placeholder="Search composer...">

<!-- Where filtered cards will render -->
<div id="cardContainer"></div>

JavaScript for Rendering & Event Handling

// Get DOM elements
const titleInput = document.getElementById('titleFilter');
const composerInput = document.getElementById('composerFilter');
const cardContainer = document.getElementById('cardContainer');

// Function to render cards to the DOM
function renderCards(filteredCards) {
  cardContainer.innerHTML = '';
  filteredCards.forEach(card => {
    const cardElement = document.createElement('div');
    cardElement.classList.add('card');
    cardElement.innerHTML = `
      <h3>${card.title}</h3>
      <p>Composer: ${card.composer}</p>
    `;
    cardContainer.appendChild(cardElement);
  });
}

// Handle input changes to trigger filtering
function updateFilters() {
  const currentFilters = {
    title: titleInput.value,
    composer: composerInput.value
  };
  const matchingCards = filterCards(cards, currentFilters);
  renderCards(matchingCards);
}

// Attach event listeners to inputs
titleInput.addEventListener('input', updateFilters);
composerInput.addEventListener('input', updateFilters);

// Render all cards on page load
renderCards(cards);

4. Optional Optimizations #

• Debounce Inputs: To avoid excessive filter runs while typing, add a debounce function to delay filtering until the user stops typing for a moment:

  function debounce(func, delay = 300) {
    let timeoutId;
    return (...args) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
  }
  
  // Replace the event listener with the debounced version
  const debouncedUpdate = debounce(updateFilters);
  titleInput.addEventListener('input', debouncedUpdate);
  composerInput.addEventListener('input', debouncedUpdate);
  

• Dynamic Filter Fields: If you might add more filter inputs later, use a class and data attribute to avoid hardcoding fields. For example:

  <input type="text" class="filter-input" data-field="title" placeholder="Search title...">
  <input type="text" class="filter-input" data-field="composer" placeholder="Search composer...">
  

  Then update the updateFilters function to dynamically collect filters:

  function updateFilters() {
    const currentFilters = {};
    document.querySelectorAll('.filter-input').forEach(input => {
      currentFilters[input.dataset.field] = input.value;
    });
    const matchingCards = filterCards(cards, currentFilters);
    renderCards(matchingCards);
  }
  

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