Hice dos gifs que muestran lo que sucede en el escritorio y en el móvil. Tengo un campo de búsqueda donde un usuario puede buscar a través de una base de datos de plantas. una vez que comienzan a escribir, muestra los resultados más cercanos de inmediato. luego, el usuario puede hacer clic en la planta que desea etiquetar en su publicación. esto funciona como debería en el escritorio. https://imgur.com/sk7TpJd
mientras que en el móvil. el usuario comienza a escribir en el campo de búsqueda de etiquetas y los resultados no aparecen hasta que se minimiza el teclado móvil. id como los resultados para mostrar como lo hace en el escritorio.
esto es lo que hace en el móvil. https://imgur.com/vpwROu3
¿Hay alguna opción que deba habilitar en el campo de entrada html para este trabajo? o alguna otra configuración con la que no estoy familiarizado? Estoy construyendo esto en VUEJS con firestore como backend. aquí está el HTML y JS básicos que hacen que esto funcione actualmente.
<input type="search" class="searchBox" @keydown.enter.prevent="" @keydown.space.prevent="" v-model="search" name="addSearch" placeholder="tag a plant" autocomplete="off" maxlength="35" /> </div> <div v-if="search"> <div class="results" v-for="plant in searchMatch" :key="plant.id" @click=" (tag = plant.plantName), (showOverlay = true), (search = '') " > <h3>{{ plant.plantName }}</h3> </div> </div> const { documents } = getCollection("plants"); const searchMatch = computed(() => { return documents.value.filter((plant) => { return plant.plantName .toLowerCase() .includes(search.value.toLowerCase()); }); });