如何在react bootstrap typeahead中从嵌套对象进行筛选



我使用react bootstrap typeahead在react中进行搜索。我正面临过滤嵌套对象的问题。

const products = [
{
id : 1,
name : "abc",
applications:[
{
name:"ink",
fullname:"INKK"
},
{
name:"solvent",
fullname:"ssINKK"
}
]
},
{
id:2,
name:"xyz",
applications:[
{
name:"ink22",
fullname:"INKK"
},
{
name:"solvent22",
fullname:"ssINKK"
}
]
}
]

我想按应用程序名称搜索。例如,如果搜索ink22,那么它应该返回id为2的对象下面是我的代码。任何帮助都是有用的。谢谢

import React  from "react";
import Typeahead from "react-bootstrap-typeahead/lib/components/Typeahead";
export default function Search(props){
const { products } = props
return (
<Typeahead
id="search-product"
labelKey={option => `${option.name}`}
minLength={1}
filterBy={(option, props) => {
console.log(props)
}}
options={products ? products : []}
placeholder="Search"
renderMenuItemChildren={(option, props) => (
<div className="card-body">
<img src="/images/default.svg" className="float-left mt-2"/>
<div className="message ml-5">
<h5 className="card-title">{`${option.ci.name} ${option.name}`} </h5>
<h6 className="card-subtitle text-muted">{`${option.brand.name} ${option.range}`}</h6>
</div>
</div>
)}
/>
);
};
洛达什是个好朋友。

const products = [
{
id : 1,
name : "abc",
applications:[
{
name:"ink",
fullname:"INKK"
},
{
name:"solvent",
fullname:"ssINKK"
}
]
},
{
id:2,
name:"xyz",
applications:[
{
name:"ink22",
fullname:"INKK"
},
{
name:"solvent22",
fullname:"ssINKK"
}
]
}];
const match = _.find(products, { applications: [{ name: 'ink22' }]});
console.log(match);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js"></script>

最新更新