Estoy trabajando con la base de datos de países, estados y ciudades en GitHub . Quiero convertirlo en un autocompletado que le devuelva la <city>, <state>, <country> o <state>, <country> o simplemente <country> . ¿Cómo debo estructurar los datos en la base de datos aproximadamente para poder lograr esto? En este momento tengo una tabla para cada modelo, la ciudad hace referencia a state_id, el estado hace referencia a country_id, pero parece que será muy complicado consultar un modelo de 3 tablas con autocompletar de manera eficiente.
Dado que este conjunto de datos es pequeño, también puedo ponerlo todo en la memoria (además de tener los datos en las tablas de la base de datos con ID). De esta manera, cuando alguien seleccione San Francisco, California, USA ., puede guardar los 3 ID asociados para futuras búsquedas. Pero al mismo tiempo, al almacenarlo todo en la memoria, ¿podríamos potencialmente hacerlo mejor buscando cadenas de búsqueda arbitrarias? ¿Qué es una buena estructura de datos para tal cosa?
Digamos, por ejemplo, que alguien busca en China . Bueno, hay docenas de ciudades llamadas China<...> , así como un lugar como China, Mexico y probablemente otros. ¿Qué debo hacer para que devuelva la mejor coincidencia o la más común? Probablemente comience enumerando primero los países, luego los estados y luego las ciudades.
Alternativamente, podría tener 3 entradas, una para el país, una para el estado, una para la ciudad, y simplemente seleccione su valor. Pero creo que sería genial ser más sofisticado con él y autocompletar en función de lo que escribas.
Todo esto se reduce a una pregunta: ¿Cómo debería estructurarse esto en general desde una perspectiva de estructura de datos/consulta?
Todo lo que necesita es una matriz de todos los países posibles, por ejemplo, luego:
const coutries = ['a', 'b', 'c'] const autoCompleteOptions = (search) => { return coutries.filter(c => { const country = c.toLowerCase() return country.includes(search.toLowerCase()) }) }Ahora, en el HTML, podemos usarlo para obtener los ajustes opcionales (la forma de reacción):
<div class="list-container"> {options.map(option =>{ return (<option-component option={option}> </option-component>) })} </div>Esa será su lista renderizada. dale estilo para que aparezca debajo de tu entrada.
Todo lo que queda por hacer es obtener el valor de entrada en cada tipo de usuario y volver a representar la lista justo debajo de la entrada.
Le recomendamos encarecidamente que muestre solo 5 países (límitelo en el código) o agregue un desplazador dentro del contenedor de lista.
En angular, podría ser aún mejor, usar una tubería como la función que devuelve la matriz de ajuste.