Question

我有一个包含我想要搜索的对象的数组。可搜索的数组如下所示：

[
    { value: 0, label: 'john' },
    { value: 1, label: 'johnny' },
    { value: 2, label: 'peter' },
    { value: 3, label: 'peterson' }
]

我使用Lodash过滤器方法搜索：

search = (text) => {
    let results = _.filter(
        this.props.options,
        { label: text }
    );
}

这仅显示与搜索查询（text参数）完全匹配的结果。我需要使用部分匹配来完成这项工作。因此，如果我插入j或johnny，它应该能够找到＆＃39; John＆＃39;和约翰尼＆＃39;。

我试过了：

search = (text) => {
    let results = _.filter(
        this.props.options => 
            this.props.options.includes({ label: text })
    );
}

但是，没有运气。没有错误也没有结果。我怎样才能做到这一点？

Answer 1

String#includes接受一个字符串作为针。如果针不是字符串，则将其转换为字符串，而对象的情况则为[object Object]。

您应该获得label的值，并使用字符串的include方法：

const options = [
    { value: 0, label: 'john' },
    { value: 1, label: 'johnny' },
    { value: 2, label: 'peter' },
    { value: 3, label: 'peterson' }
];

const search = (text) => options.filter(({ label }) => label.includes(text));

const result = search('jo');

console.log(result);

Answer 2

由于您使用的是includes，这是ES6标准的一部分，因此我将使用ES6 Array.prototype.filter而不是lodash-filter来解决此任务：

let search = (list, text) =>
  list.filter(i => i.label.toLowerCase().includes(text.toLowerCase()));

let list = [
    { value: 0, label: 'john' },
    { value: 1, label: 'johnny' },
    { value: 2, label: 'peter' },
    { value: 3, label: 'peterson' }
];

let result = search(list, 'j');

console.log(result); // [{value: 0, label: "john"}, {value: 1, label: "johnny"}]

此外，使用.toLowerCase，您可以使用“John”代替“john”。

Answer 3

这不是您使用String.prototype.includes的方式。你应该为它提供一个字符串而不是一个对象。你应该提供一个包含对includes：

的调用的函数

search = (text) => {
    let results = _.filter(
        this.props.options,                             // first parameter to _.filter is the array
        option => option.label.includes(text)           // the second parameter is a funtion that takes an option object and returns a boolean (wether the label of this option includes the text text or not)
    );
}

将filter（）与includes（）结合使用以获得部分匹配

3 个答案: