TypeScript基于输入值动态过滤对象数组的技术实现需求

Let's walk through how to build the filter functionality you need—taking your task array and returning only items that match the input value (like 'R' in your example).

Step 1: Define Your Data #

First, let's start with the raw task data you provided:

const taskData = [
  { taskname: 'Test1', taskId: '1', status: 'Submitted' },
  { taskname: 'Test2', taskId: '2', status: 'Resolved' },
  { taskname: 'Test3', taskId: '4', status: 'Submitted' },
  { taskname: 'Test4', taskId: '5', status: 'In Progress' },
  { taskname: 'Test5', taskId: '6', status: 'Resolved' },
  { taskname: 'Test6', taskId: '7', status: 'Submitted' }
];

Step 2: Create the Filter Function #

We'll use JavaScript's filter() method to narrow down the array. To make the filter case-insensitive (so 'r' and 'R' work the same), we'll convert both the input and task values to lowercase.

Option 1: Match Any Field #

This will check all fields (taskname, taskId, status) for the input value:

function filterTasks(input, tasks) {
  if (!input.trim()) return [...tasks]; // Return all tasks if input is empty
  const lowerInput = input.toLowerCase();
  
  return tasks.filter(task => {
    // Check if any value in the task object includes the input
    return Object.values(task).some(value => 
      value.toString().toLowerCase().includes(lowerInput)
    );
  });
}

Option 2: Match Specific Fields Only #

If you only want to filter by, say, the status field (which is where 'R' would hit in your example), adjust the filter logic:

function filterTasksByStatus(input, tasks) {
  if (!input.trim()) return [...tasks];
  const lowerInput = input.toLowerCase();
  
  return tasks.filter(task => 
    task.status.toLowerCase().includes(lowerInput)
  );
}

Step 3: Test the Filter with 'R' #

Let's run the filter with your test input 'R':

// Using the "match any field" function
const filtered = filterTasks('R', taskData);
console.log(filtered);

This will output the two tasks with status: 'Resolved' (since that's the only field containing 'R'):

[
  { taskname: 'Test2', taskId: '2', status: 'Resolved' },
  { taskname: 'Test5', taskId: '6', status: 'Resolved' }
]

Step 4: Connect to an Input Box (Frontend Integration) #

To make this work with a real input box, add event listeners to trigger the filter as the user types:

<!-- HTML -->
<input type="text" id="taskFilter" placeholder="Type to filter tasks...">
<div id="taskResults"></div>

// JavaScript
const input = document.getElementById('taskFilter');
const resultsContainer = document.getElementById('taskResults');

// Function to render tasks to the DOM
function renderTasks(tasks) {
  resultsContainer.innerHTML = tasks.map(task => `
    <div class="task-item">
      <h4>${task.taskname}</h4>
      <p>ID: ${task.taskId} | Status: ${task.status}</p>
    </div>
  `).join('');
}

// Initial render of all tasks
renderTasks(taskData);

// Listen for input changes
input.addEventListener('input', (e) => {
  const userInput = e.target.value;
  const filteredTasks = filterTasks(userInput, taskData);
  renderTasks(filteredTasks);
});

Now when you type 'R' into the input box, only the two Resolved tasks will show up.

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