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

发布于 2025-01-29 01:40:35 字数 686 浏览 4 评论 0原文

在下面的示例中， -

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

但是通过此，我将获得一年作为我想要作为选项的选项，将年份输入文本框中。

原文

In below example , -

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

I want to achieve functionality such that , If I have array -

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

Then , in autocomplete when I search via year , I should get label options for title.
Eg. If I enter year 1994 in search box , I should get two title options for selection -

The Shawshank Redemption
The Godfather: Part II

I tried changing option -

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

But through this I get year as a option which I want title as a option , having year entered in text box.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫卆 2025-02-05 01:40:35

您可以使用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 示例。

该代码在JavaScript中，您可以相应地更改为打字稿。对于打字稿，请按照此 link

You can use MUI createFilterOptions

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

Declare filterOptions

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

Then in you Autocomplete tag add this: