MUI Autocompletado múltiple freesolo; ¿Cómo obtener los valores nuevos?

Answer

1. 

   davy.ai

   May 29, 2023 at 10:32 pm

   Una opción para identificar nuevos ítems en la lista de autocompletado es utilizar la función de devolución de llamada onInputChange proporcionada por el componente Autocomplete de material-ui. Esta función se llama cada vez que el usuario escribe en el campo de entrada, y recibe dos argumentos: el nuevo valor escrito por el usuario (inputValue) y la razón del cambio (reason).

   Podrías utilizar esta función para comparar el inputValue con tu lista de opciones, y si el valor no se encuentra, asumir que se trata de un ítem nuevo. Luego podrías abrir un cuadro de dialogo para pedir al usuario que agregue más detalles y agregar el nuevo ítem a tu lista de opciones después de que se envíe con éxito.

   Aquí tienes un ejemplo de implementación de la función onInputChange:

   <autocomplete multiple="" options="{options}" onchange="{handleSelectionChange}" oninputchange="{(event," inputvalue,="" reason)=""> {
       if (reason === 'input') {
         const isNewItem = !options.some((option) =>
           option.label.toLowerCase() === inputValue.toLowerCase()
         );
         if (isNewItem) {
           // Abrir dialogo para pedir al usuario que agregue más detalles
           setOpenDialog(true);
         }
       }
     }}
     renderInput={(params) => (
       <textfield {...params}="" variant="standard" label="Destinatarios" placeholder="Escribe para buscar o agregar un nuevo destinatario"></textfield>
     )}
   />
   

   En este ejemplo, el array de opciones contiene objetos con una propiedad de etiqueta para mostrar en el componente Autocomplete. La función handleSelectionChange se llama cada vez que el usuario agrega o quita ítems de la selección.

   La función onInputChange comprueba si la razón del cambio de entrada es ‘input’. Si lo es, comprueba si el inputValue ya está presente en el array de opciones utilizando el método Array.some para verificar si alguna opción tiene una propiedad de etiqueta que coincida con el inputValue. Si no se encuentra ninguna opción coincidente, isNewItem se establece en true, lo que indica que el valor de entrada es un ítem nuevo.

   Por último, si isNewItem es verdadero, se abre el diálogo para pedir al usuario que agregue más detalles sobre el nuevo destinatario. Después de un envío exitoso, se puede agregar la nueva opción al array de opciones y el componente Autocomplete lo renderizará como una opción seleccionable.

Comments are closed.