0

Estoy haciendo una mini app del clima con todas las ciudades del mundo, con un input que recibe las query del usuario y filtra los datos de un json +100K de datos (todas las ciudades del mundo). el programa filtra correctamente pero es super lento para filtrar ya que son muchos datos. Habría alguna manera de optimizar esta busqueda con tantos datos?

const filterOptions = createFilterOptions({
 matchFrom: 'start',
 stringify: (citylist) => citylist.key,
 limit: 4, });


  <Grid container direction="row" justifyItems="center" alignItems="center">
    <Grid item sx={{background: "rgba(35, 101, 117, 0.801)", padding:'5vh', borderRadius:'3%', boxShadow:"-1px -1px 39px 4px black" }}>

        <form onSubmit={(event,value) => get(event,value)}>
                  
                  <Autocomplete
                  autoHighlight={true}
                  id="filter-demo"
                  open={input}
                  options={array}
                  freeSolo={true}
                  getOptionLabel={(option) => (option===true) ? `${option.city} ${option.country}` : ""}
                  filterOptions={filterOptions}
                  onChange={(event, value) => get(event, value)}
                  sx={{ width: 300 }}
                  renderOption={(props, option) =>  (
                    <Box sx={{ '& > img': { mr: 2, flexShrink: 0 }}} {...props} key={option.key}>
                      <img
                        loading="lazy"
                        width="20"
                        src={`https://flagcdn.com/w20/${option.country.toLowerCase()}.png`}
                        srcSet={`https://flagcdn.com/w40/${option.country.toLowerCase()}.png 2x`}
                        alt=""
                      />
                      {option.city} {option.country}
                    </Box>
                    )}
                  renderInput={(params, option) => ( 
                  <Paper>
                    <TextField onChange={(e)=>handlerInput(e.target.value)}{...params} 
                    type='input' 
                    label="Enter a city" 
                    variant="filled"
                    /></Paper>)}
                      /> 

1 respuesta 1

0

pueden ser varias cosas, lo primero que haria seria optimizar el llamado de ese handlerInput, que no se llame por cada caracter ingresado en el autocomplete, podrías aplicar un debounce, lo otro que se podría validar es la lógica que contiene ese handlerInput, ver cómo estás procesando la data, podrias dar mas info para plantear posibles soluciones, saludos!

1
  • Tal y como está redactada, tu respuesta no es clara. Por favor, pulsa en editar para añadir detalles adicionales que ayuden a los demás a entender cómo esto responde a la pregunta formulada. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    el 4 may. 2022 a las 12:48

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.