通过另一个参数自动完成搜索

Question

在下面的例子中，-

https://codesandbox.io/s/g5ucdj?file=/demo.tsx

我想实现这样的功能，如果我有数组 -

const top100Films = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1994 },]

然后，当我通过年份搜索时，在自动完成中，我应该获得标题的标签选项。 例如。如果我在搜索框中输入 1994 年，我应该会得到两个标题选项供选择 -

The Shawshank Redemption
The Godfather: Part II

我尝试更改选项 -

options={top100Films.map((option) => option.year)}

但是通过这个我得到了年份作为一个选项，我想要标题作为一个选项，在文本框中输入了年份。

Answer 1

据我所知，您正在使用 React js， 所以我会建议你使用 React-select 以获得更好的功能

1. 使用“npm i --save react-select”添加包。
2. 作为组件导入
3. 使用 jsx 格式的
   将 json 数据添加到 {data}。

   参考文档：React-select npm https://react-select.com/home

   一切都被完美记录

   您可以使用 MUI createFilterOptions

   import { createFilterOptions } from '@mui/material/Autocomplete';
   

   声明过滤器选项

   const filterOptions = createFilterOptions({
     matchFrom: 'any',
     stringify: (option) => option.year.toString(),  //.toString because year is integer
   });
   

   然后在你的自动完成标签中添加：

   filterOptions={filterOptions}
   

   Codesandbox example.

   代码在javascript中，您可以相应地更改为打字稿。对于打字稿，请遵循此 link

   ©2023 WhoseBug

Answer 2

您可以使用 MUI createFilterOptions

import { createFilterOptions } from '@mui/material/Autocomplete';

声明过滤器选项

const filterOptions = createFilterOptions({
  matchFrom: 'any',
  stringify: (option) => option.year.toString(),  //.toString because year is integer
});

然后在你的自动完成标签中添加：

filterOptions={filterOptions}

Codesandbox example.

代码在javascript中，您可以相应地更改为打字稿。对于打字稿，请遵循此 link