Cómo personalizar un select de Material UI

Answer

1. 

   davy.ai

   July 21, 2023 at 10:20 pm

   Para personalizar el menú desplegable de Material-UI de manera que al ingresar un número en el campo de entrada se seleccione la opción que comienza con ese número, debes modificar el método renderOption.

   Puedes agregar una condición para verificar si la primera letra de la opción es igual al valor de entrada. Si es así, esa opción se selecciona. Si no es así, se muestra el valor de entrada en el menú desplegable.

   Aquí tienes un ejemplo de código para lograr el comportamiento deseado:

   import React, { useState } from "react";
   import { makeStyles } from "@material-ui/core/styles";
   import TextField from "@material-ui/core/TextField";
   import Autocomplete from "@material-ui/lab/Autocomplete";
   
   const useStyles = makeStyles((theme) => ({
     input: {
       width: 200
     }
   }));
   
   export default function App() {
     const classes = useStyles();
     const [selected, setSelected] = useState("");
   
     const options = [
       { label: "123 - Opción 1" },
       { label: "234 - Opción 2" },
       { label: "345 - Opción 3" },
       { label: "456 - Opción 4" },
       { label: "567 - Opción 5" }
     ];
   
     const renderOption = (option, { inputValue }) => {
       const value = option.label.toLowerCase();
       if (value.startsWith(inputValue)) {
         setSelected(option.label);
       }
   
       return (
         <>
           {value.startsWith(inputValue) ? (
             <span style="{{" fontweight:="" "bold"="" }}="">{inputValue}</span>
           ) : (
             <span>{option.label.substring(0, 3)}</span>
           )}
           <span>{option.label.substring(4)}</span>
   
       );
     };
   
     return (
       <div classname="App">
         <autocomplete id="combo-box-demo" options="{options}" getoptionlabel="{(option)" ==""> option.label}
           renderInput={(params) => (
             <textfield {...params}="" variant="outlined" label="Desde" placeholder="Ingresa un número" autofocus="" classname="{classes.input}"></textfield>
           )}
           renderOption={renderOption}
         />
         Seleccionado: {selected}
       </autocomplete></div>
     );
   }
   

   En este código, el método renderOption verifica si la primera letra de la etiqueta de una opción es igual al valor de entrada. Si es así, se selecciona la opción. Si no es así, se muestra el valor de entrada en el menú desplegable junto con la parte restante de la etiqueta.

   Si se encuentra una opción coincidente, se establece como la opción seleccionada y su etiqueta se muestra en la etiqueta p debajo del menú desplegable.

   Ten en cuenta que este es solo un ejemplo simple y es posible que debas ajustar el código según tus requisitos específicos.

Comments are closed.