0
156
ViewsDesplazamiento automático a una opción particular en Autocompletar
Supongamos que tengo una lista de elementos en el menú desplegable o Autocomplete en Material-UI, ¿cómo puedo desplazarme automáticamente al elemento deseado en la lista cuando toco el menú desplegable, por ejemplo, en la lista de top100Films , ya tengo los elementos, lo que significa que cuando abro el menú desplegable, primero muestra:
{ label: 'The Shawshank Redemption', year: 1994 }Lo que quiero lograr es que, cuando abro el menú desplegable, la lista de elementos debe comenzar en un elemento que quiero, por ejemplo:
{ label: 'Inception', year: 2010 }Debería aparecer como el primero, pero la lista del menú desplegable debería desplazarse automáticamente a ese elemento.
A continuación se muestra el código completo:
import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; export default function ComboBox() { return ( <Autocomplete disablePortal id="combo-box-demo" options={top100Films} sx={{ width: 300 }} renderInput={(params) => <TextField {...params} label="Movie" />} /> ); } // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top const top100Films = [ { label: 'The Shawshank Redemption', year: 1994 }, ... ];¿Cómo se puede lograr esto de la mejor manera?
1 answers
Answer question0
Si desea desplazarse hasta la opción, debe identificar el elemento equivalente en el árbol DOM y luego llamar a Element.scrollIntoView() .
Puede hacerlo adjuntando un atributo de datos a cada elemento de opción usando renderOption , luego, cada vez que el usuario abra, use document.querySelector() para encontrar la opción basada en el atributo y desplácese hasta ella:
<Autocomplete onOpen={() => { setTimeout(() => { const optionEl = document.querySelector( `[data-name="${movieToScrollTo}"]` ); optionEl?.scrollIntoView(); }, 1); }} renderOption={(props, option) => { return ( <li {...props} data-name={option.label}> {option.label} </li> ); }} />Demo en vivo
