Javascript React/MaterialUI-如何编辑多重输入以显示不同于选项中的占位符？

我有一个inputfield/下拉菜单，其中包含两个JSON对象，

symbol

和

company

export default function SymbolInput() {

    const [data, setData] = useState({ companies: [] });

    const classes = useStyles();

    useEffect(() => {
        Axios.get("https://app.url.io/").then((res) => {
            setData({ companies: res.data });
        });
    }, [setData]);
    

    return (
        <div className={classes.root}>
            <Autocomplete
                multiple
                options={data.companies}
                getOptionLabel={(option) => option.symbol + ' | ' +  option.company}
                filterSelectedOptions
                renderInput={(params) => (
                <TextField
                    {...params}
                    variant="outlined"
                    label="Companies"
                />
                )}
            />
        </div>
    );

导出默认函数SymbolInput（）{
const[data，setData]=useState（{companys:[]}）；
const classes=useStyles（）；
useffect（（）=>{
Axios.get（“https://app.url.io/）然后（（res）=>{
setData（{公司：res.data}）；
});
}，[setData]）；
返回(

我希望保持下拉菜单不变，当用户使用
文本字段选择或输入字段时，我希望公司符号仅显示为占位符，而不是符号+公司名称

因此，作为一个示例，上面图像的占位符将是
AAPL abv ABMD

我怎样才能做到这一点呢？
看看您的示例代码，它看起来像是
自动完成
的prop
getOptionLabel
是呈现标签的函数

现在是

getOptionLabel={(option) => option.symbol + ' | ' +  option.company}

因此，仅显示符号，它可能只是

getOptionLabel={(option) => option.symbol}

编辑：
它看起来像是
AutoComplete
也接受
renderOption
prop。如果希望下拉元素和文本字段具有不同的呈现，请同时使用这两个属性

getOptionLabel={(option) => option.symbol + ' | ' +  option.company}
renderOption={(option) => option.symbol}

编辑2：
如果您想要自定义行为，您必须自己跟踪搜索文本，并使用
过滤器选项
道具创建自己的搜索功能。下面是一个功能示例的codesandbox。您必须根据自己的需要对其进行定制

Hey@Andrew，谢谢你的评论。所以我实际上希望保留下拉列表：
{（option）=>option.symbol+'|'+option.company}
。我希望选择字段中的输入只反映
option.symbol
。如果我使用你的代码，那么下拉列表中的选项也不会包含公司名称（我想要的）。通过选择字段，我的意思是
谢谢您找到它，所以实际上是从测试出来的。我必须将
{（option）=>option.symbol+'|'+option.company}
添加到
渲染
。然后，
{（option）=>option.symbol}
到
getOptionLabel
。我们都切换了它们的功能。进行这些更改可以让一切看起来很好。但是，现在当我搜索术语时，下拉菜单不会搜索
公司
名称，只有
符号
被用作搜索参数，即使下一步显示的是公司名称添加到下拉列表中。@Dre已更新。您必须创建自己的筛选函数并呈现自己的自定义选项