Question

我正在尝试对每个keyup执行.filter（）方法，以获取以下数组中与输入字段值匹配的对象列表：

var peopleArray = [
{
    name: "Steve",
    email: "steve@yahoo.com"
},
{
    name: "Sam",
    email: "sam@yahoo.com"
},
    {
    name: "Sarah",
    email: "sarah@yahoo.com"
},
    {
    name: "Kyle",
    email: "kyle@yahoo.com"
},
    {
    name: "Kody",
    email: "kody@yahoo.com"
},
    {
    name: "Scarlet",
    email: "scarlet@yahoo.com"
},
]

以下是我用来搜索的内容：

<input type="search" id="searchInput" placeholder="Search Activities" />

searchInput.addEventListener('keyup', function() {
    searchPeople(searchInput.value);
})


function searchPeople(chars) {

    //Search People and return a list of JSON objects
    return //All JSON objects that matched
}

我是新手，所以我不太明白如何实现这一点。

Answer 1

如果你想要一个简单的字符串搜索，你可以使用filter和indexOf来返回包含输入的每个字符串：

function searchPeople(chars) {
  return people.filter(function (person) {
    return person.name.indexOf(chars) > -1;
  });
}

如果indexOf找到与chars匹配的字符串，则会返回大于-1的位置（索引）。这将匹配过滤器并保留该人。

如果您愿意，可以展开过滤谓词以检查name和email：

function searchPeople(chars) {
  return people.filter(function (person) {
    return (person.name.indexOf(chars) > -1 || person.email.indexOf(chars) > -1);
  });
}

Answer 2

这将根据姓名和电子邮件搜索人员。大写/小写无关紧要，因为它将小写值与小写值进行比较。

filter需要返回“真实”值。所以基本上它应该返回任何不是：false，0，undefined，null，NaN或""（空字符串）

match将在另一个字符串中搜索字符串，如果找到则返回匹配值的数组，如果找不到，则返回null。因此，如果匹配找不到任何内容，则返回行基本上为return null || null;，并且由于null为“falsy”，过滤器会将该人排除在结果之外。

function searchPeople(chars) {
    peopleArray.filter(function(person) {
        var name = person.name.toLocaleLowerCase();
        var email = person.email.toLocaleLowerCase();
        var searchTerm = chars.toLocaleLowerCase();
        return name.match(searchTerm) || email.match(searchTerm);
    });
}

返回数组中匹配的对象

2 个答案: