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

时间:2016-10-26 14:18:16

标签: javascript jquery reactjs lodash

我想根据我在输入字段中输入的内容得到结果。此搜索可以通过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);
                        });

                    });

3 个答案:

答案 0 :(得分:3)

如果找到某个值,您可以遍历键并为过滤器返回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);

答案 1 :(得分:1)

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"));

答案 2 :(得分:0)

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

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);