在材料 ui 中使用自定义输入自动完成不起作用

Question

我可以通过从列表中选择值来使用自动完成功能。现在我想在选择中添加一个新值。我尝试了多种选择，包括onChange但无法实施。

如果用户输入内容并在文本框外部单击，则它应该将自由文本转换为标签。此外，允许用户继续从预定义列表/自由文本添加更多标签。

我正在尝试这里的选项，但没有运气。这是否可能，或者我是否需要寻找其他选择？

Answer 1

In order to add new items with the Autocomplete you should use the freeSolo property of the Autocomplete. This feature gives you an option to automatically use the value from the input and add it into the value of the Autocomplete.

The issue that you have with the freeSolo is when you have complex objects (and not just strings).

There are multiple ways to solve this.

Option #1 - If the complex objects are only the pre-existing values, you can use this in order to display the correct values:

<Autocomplete
  freeSolo
  getOptionLabel={option => option.title || option}
  ...
/>

If you don't have option.title (which is the case for the default freeSolo because the value is just the text, and not an object) - just show the option.
You can find here a working example: https://codesandbox.io/s/mui-autocomplete-create-complex-4mk5v?file=/demo.js

Option #2 - if you do need complex objects:

You will need to manage adding/removing the objects by yourself.

The onChange prop of the Autocomplete gets a function that you can use for this.