Autocompleter Neo

Este paquete cuenta con un componente principal llamado GoigSearch que a su vez contiene un componente de input de texto y un diálogo. El diálogo muestra sugerencias de direcciones de la Ciudad Autónoma de Buenos Aires dependiendo del texto que se escriba en el input, siendo posible navegar por las opciones con el teclado, al presionar Enter se realiza la búsqueda de la dirección ingresada. El resultado puede ser manipulado a través de la función handleSearch que se pasa como parámetro al componente principal.

Instalación y configuración

Instalar el paquete

npm install autocompleter-neo

Importar el paquete

• Importar el componente principal GoigSearch con su instancia de Autocompleter.
• Importar SuggesterOptions, que contiene todos los posibles suggesters (por el momento sólo existe AddressSuggester).
• En el caso de estar utilizando TypeScript, es posible importar la interfaz AddressResponse para tipar el resultado de la búsqueda.
• Es posible también importar SkinOptions con las skins que contiene el paquete, la skin por defecto es goigLight.

import GoigSearch from "autocompleter-neo/dist/components/GoigSearch/GoigSearch";

import { SuggestersOptions } from "autocompleter-neo/dist/models/options/SuggesterOptions";
import { SkinOptions } from "autocompleter-neo/dist/models/options/SkinOptions";
import { AddressResponse } from "autocompleter-neo/dist/models/responses/AddressResponse";

import neoAutocompleter from "autocompleter-neo/dist/services/NeoAutocompleter";

Configuración

Funcion requerida

Es la función que permite manipular el resultado de la búsqueda, se debe pasar como parámetro al componente principal.

const handleSearch = (searchResult: AddressResponse) => {
    console.log("searchResult", searchResult);
};

Configuración del Suggester

• Crear el Suggester que sea necesario, en SuggesterOptions se encuentran todas las opciones posibles (por el momento 1 sola).
• Se pueden mandar los parámetros de configuración o se tomarán los valores por defecto.
• Los parámetros de configuración son:
  • minTextLength: el mínimo de caracteres necesarios para iniciar una búsqueda. El valor por defecto y mínimo posible de este parámetro es 3.
  • waitingTime: el tiempo que se va a esperar antes de iniciar una búsqueda. El valor por defecto es 1000, el mínimo posible es 500 y su unidad es milisegundos.
  • maxSuggestions: la cantidad máxima de sugerencias que aparecen en el diálogo. El valor por defecto y máximo posible de este parámetro es 10.
• Se sugiere colocarlo dentro de un useEffect como en el ejemplo para que sólo se ejecute 1 vez.

const minTextLength = 4;
const waitingTime = 500;
const maxSuggestions = 5;

useEffect(() => {
    autocompleter.createSuggester(SuggestersOptions.AddressSuggester, minTextLength, waitingTime, maxSuggestions);
}, []);

Componente principal

Ambos parámetros son opcionales, pero se recomienda pasar getSearchResult para poder manipular el resultado de la búsqueda. En el caso de la skin, al no proporcionarse se tomará la default que es goigLight.

<GoigSearch
    skin={SkinOptions.goigLight}
    getSearchResult={(searchResult: AddressResponse) => handleSearch(searchResult)}
/>

Aclaraciones

El diálogo que muestra las sugerencias tiene definido un z-index: 100.

Suggesters

AddressSuggester

Sugiere y busca direcciones dentro de la Ciudad Autónoma de Buenos Aires y devuelve su información.

Las opciones de búsqueda son:

• Calle: devuelve las coordenadas del inicio de la calle.
• Calle y altura: devuelve las coordenadas de la puerta buscada.
• Intersección de calles: devuelve las coordenadas de la esquina.

Ejemplo de respuesta de AddressSuggester

{
    "altura": null,
    "barrio": "PALERMO",
    "codCalle_1": 1736,
    "codCalle_2": null,
    "codPartido": "CABA",
    "comuna": "Comuna 14",
    "coordenada_x": -58.4353511196483,
    "coordenada_y": -34.57492803603612,
    "direccion": "CABILDO AV.",
    "manzanaInf": null,
    "nombreCalle_1": "CABILDO AV.",
    "nombreCalle_2": null,
    "nombreLocalidad": "CABA",
    "nombrePartido": "CABA",
    "parcelaInf": null,
    "sectorInf": null,
    "smp": "023-005-000B",
    "tipoCatastro": "formal",
    "tipoDireccion": "calle_altura"
}

Configuraciones

| Parámetro | Descripción | Default | | :------------: | :--------------------------------------------------------------: | ------- | | minTextLength | Mínimo de caracteres con el que empieza la búsqueda. (Mínimo 3). | 3 | | waitingTime | El tiempo que espera para iniciar la búsqueda. (Mínimo 500). | 1000 | | maxSuggestions | La cantidad máxima de respuestas. (Máximo 10). | 10 |

Ejemplo completo

import { useEffect } from "react";

import GoigSearch, { autocompleter } from "autocompleter-neo/dist/components/GoigSearch/GoigSearch";

import { SuggestersOptions } from "autocompleter-neo/dist/models/options/SuggesterOptions";
import { SkinOptions } from "autocompleter-neo/dist/models/options/SkinOptions";
import { AddressResponse } from "autocompleter-neo/dist/models/responses/AddressResponse";

import neoAutocompleter from "autocompleter-neo/dist/services/NeoAutocompleter";

import "./App.scss";

function App() {
    const minTextLength = 3;
    const waitingTime = 500;
    const maxSuggestions = 5;

    useEffect(() => {
        neoAutocompleter.createSuggester(
            SuggestersOptions.AddressSuggester,
            minTextLength,
            waitingTime,
            maxSuggestions
        );
    }, []);

    const handleSearch = (searchResult: AddressResponse) => {
        console.log("searchResult", searchResult);
    };

    return (
        <div className="App">
            <GoigSearch
                skin={SkinOptions.goigLight}
                getSearchResult={(searchResult: AddressResponse) => handleSearch(searchResult)}
            />
        </div>
    );
}

export default App;