Автозаполнение с пользовательским вводом в пользовательском интерфейсе материала не работает

Question

Я могу использовать автозаполнение, выбирая значения из списка. Теперь я хочу добавить новое значение в выделение. Я пробовал несколько вариантов, включая onChange, но не смог реализовать.

Если пользователь вводит что-то и щелкает мышью за пределами текстового поля, он должен преобразовать свободный текст в тег. Кроме того, разрешите пользователю продолжать добавлять теги из предопределенного списка / свободного текста.

Я пробую варианты здесь , но безуспешно. Возможно ли это вообще или мне нужно искать другие варианты?

Answer 1

Чтобы добавить новые элементы с помощью Autocomplete, вы должны использовать свойство freeSolo Autocomplete. Эта функция дает вам возможность автоматически использовать значение из ввода и добавлять его к значению Autocomplete.

Проблема, с которой вы сталкиваетесь с freeSolo, заключается в том, что у вас есть сложные объекты (а не только строки).

Есть несколько способов решить эту проблему.

Вариант № 1. Если сложные объекты являются только ранее существовавшими значениями, вы можете использовать это для отображения правильных значений :

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

Если у вас нет option.title (что имеет место для freeSolo по умолчанию, потому что значением является просто текст, а не объект) - просто покажите option.
Здесь вы можете найти рабочий пример: https://codesandbox.io/s/mui-autocomplete-create-complex-4mk5v?file= / demo. js

Вариант №2 - если вам нужны сложные объекты:

Вам нужно будет самостоятельно управлять добавлением / удалением объектов.

Опора onChange для Autocomplete получает функцию, которую вы можете использовать для этого.