如何通过在javascript中搜索多个属性值来实现过滤器过滤？答案

【问题标题】：How to implement filter by filter by search multiple property values in javascript?如何通过在javascript中搜索多个属性值来实现过滤器过滤？
【发布时间】：2017-03-08 23:10:43
【问题描述】：

我想根据我在输入字段中输入的内容获得结果。此搜索可以通过多个键过滤，例如 firstName、lastName、emailId。

这是我的对象数组，

var resData = [
            {
                firstName:"Jhon",
                lastName:"adam",
                emailId:"jhn12@gmail.com"
            },
            {
                firstName:"Kyle",
                lastName:"Miller",
                emailId:"kl12@gmail.com"
            },
            {
                firstName:"Jhonathan",
                lastName:"adam",
                emailId:"jadm12@gmail.com"
            },
            {
                firstName:"Lewis",
                lastName:"harber",
                emailId:"lewh12@gmail.com"
            }
        ];

Javascript 代码，

resData.filter(data, function(item){
                        item.map(function(list, i) {
                            if (list.firstName.toLowerCase().indexOf(self.state.inputValue.toLowerCase()) === -1 || list.lastName.toLowerCase().indexOf(self.state.inputValue.toLowerCase()) === -1 || list.emailId.toLowerCase().indexOf(self.state.inputValue.toLowerCase()) === -1) {
                                return;
                            }
                            console.log(list);
                        });

                    });

【问题讨论】：

那么用户应该如何输入多个值呢？是否有格式，例如firstname:Jhon emaiid:jhn12@gmail.com？或者它只是一个以空格分隔的字符串列表：jhon jhn12@gmail.com？
听起来你想要一个自动完成来查找所有值的匹配项。 map 在那里做什么？

标签： javascript jquery reactjs lodash

【解决方案1】：

如果找到某个值，您可以遍历键并为过滤器返回 true。

var resData = [{ firstName: "Jhon", lastName: "adam", emailId: "jhn12@gmail.com" }, { firstName: "Kyle", lastName: "Miller", emailId: "kl12@gmail.com" }, { firstName: "Jhonathan", lastName: "adam", emailId: "jadm12@gmail.com" }, { firstName: "Lewis", lastName: "harber", emailId: "lewh12@gmail.com" }],
    self = { state: { inputValue: 'adam' } },
    result = resData.filter(function (item) {
        return Object.keys(item).some(function (k) {
            return item[k].toLowerCase().indexOf(self.state.inputValue.toLowerCase()) !== -1;
        });
    });
   
console.log(result);

使用预定义的键

var resData = [{ firstName: "Jhon", lastName: "adam", emailId: "jhn12@gmail.com" }, { firstName: "Kyle", lastName: "Miller", emailId: "kl12@gmail.com" }, { firstName: "Jhonathan", lastName: "adam", emailId: "jadm12@gmail.com" }, { firstName: "Lewis", lastName: "harber", emailId: "lewh12@gmail.com" }],
    self = { state: { inputValue: 'adam' } },
    result = resData.filter(function (item) {
        return ['firstName', 'lastName'].some(function (k) {
            return item[k].toLowerCase().indexOf(self.state.inputValue.toLowerCase()) !== -1;
        });
    });
   
console.log(result);

【讨论】：

我可以手动定义键吗？因为有些键值是空的。所以它的返回错误。

【解决方案2】：

var resData = [
        {
            firstName:"Jhon",
            lastName:"adam",
            emailId:"jhn12@gmail.com"
        },
        {
            firstName:"Kyle",
            lastName:"Miller",
            emailId:"kl12@gmail.com"
        },
        {
            firstName:"Jhonathan",
            lastName:"adam",
            emailId:"jadm12@gmail.com"
        },
        {
            firstName:"Lewis",
            lastName:"harber",
            emailId:"lewh12@gmail.com"
        }
    ];

var search = function(text) {
  text = text.toLowerCase();
  return resData.filter(x => x.firstName.toLowerCase().indexOf(text) >= 0 
       || x.lastName.toLowerCase().indexOf(text) >= 0 
       || x.emailId.toLowerCase().indexOf(text) >= 0);
}

console.log(search("Adam"));

【讨论】：

虽然在性能和可读性方面比 OP 的版本要好 waaay，但不确定它是否真的回答了这个问题。
怎么样？这将根据不同的键值返回与搜索文本匹配的元素。这是我对他问题的理解。
是的，这正是问题所在，完全不清楚问题是什么。

【解决方案3】：

看起来你想用任意键搜索...

var resData = [{
  firstName: "Jhon",
  lastName: "adam",
  emailId: "jhn12@gmail.com"
}, {
  firstName: "Kyle",
  lastName: "Miller",
  emailId: "kl12@gmail.com"
}, {
  firstName: "Jhonathan",
  lastName: "adam",
  emailId: "jadm12@gmail.com"
}, {
  firstName: "Lewis",
  lastName: "harber",
  emailId: "lewh12@gmail.com"
}];

//var searchString = self.state.inputValue.toLowerCase();
var searchString = "adam".toLowerCase();

// filter the data
var filteredData = resData.filter(function(item) {
  // for each item int he array, check each key value
  for (key in item) {
    // if the key value matches the search string then return true
    if (item[key].toLowerCase() == searchString) return true;
  }
  // if we get here that means none of the values in the item were a match so return false
  return false;
});

console.log(filteredData);

【讨论】：