用户输入时基于Like条件筛选对象数组的技术实现问询

Got it, let's fix this fuzzy filtering issue for your people array! I know you tried a Lodash-based solution before but only got a single match—let's get you all the results you need.

Method 1: Vanilla JavaScript (No Dependencies) #

You don't even need external libraries to pull this off. Use the native filter() method combined with string includes() or regular expressions to get all matching items, not just the first one.

Here's how to apply it to your peopleList array, targeting the name property:

const peopleList = [
  {name: "john bee", age:23},
  {name: "john woo", age:43},
  {name: "jim foo", age:101},
  {name: "bob wow", age:67},
  {name: "last john", age:43},
];

// Core filtering function (case-insensitive)
function filterPeople(searchText) {
  const lowerSearch = searchText.toLowerCase();
  return peopleList.filter(person => 
    person.name.toLowerCase().includes(lowerSearch)
  );
}

// Test it out: search for "john"
console.log(filterPeople("john"));
// Returns all name-matching objects:
// [{name: "john bee", age:23}, {name: "john woo", age:43}, {name: "last john", age:43}]

For more flexible matching (like supporting regex patterns), use RegExp:

function filterPeopleWithRegex(searchText) {
  // 'i' flag makes it case-insensitive
  const matchPattern = new RegExp(searchText, 'i');
  return peopleList.filter(person => matchPattern.test(person.name));
}

Method 2: Correct Lodash Implementation (Fixing Your Single-Match Problem) #

Chances are you used _.find() before (which only returns the first match), but Lodash has a _.filter() method that works exactly like the native one—returning all matches:

const _ = require('lodash'); // Make sure Lodash is imported

function filterWithLodash(searchText) {
  const lowerSearch = searchText.toLowerCase();
  return _.filter(peopleList, person => 
    person.name.toLowerCase().includes(lowerSearch)
  );
}

// Or simplify with Lodash's own _.includes:
return _.filter(peopleList, person => 
  _.includes(person.name.toLowerCase(), lowerSearch)
);

Bonus: Real-Time Input Listening #

If you want to tie this to a user input field for live filtering, add an event listener:

<input type="text" id="searchInput" placeholder="Search names...">
<ul id="resultsList"></ul>

<script>
const input = document.getElementById('searchInput');
const resultsList = document.getElementById('resultsList');

input.addEventListener('input', (e) => {
  const searchTerm = e.target.value;
  const filteredPeople = filterPeople(searchTerm);
  
  // Render results to the page
  resultsList.innerHTML = filteredPeople.map(person => 
    `<li>${person.name} (${person.age} years old)</li>`
  ).join('');
});
</script>

Now users will see all matching results update in real-time as they type!

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