FindMyAddress

Find all addresses anywhere around the world with many options for all possible cases to customize the plugin with your own the theme!

Getting Started

How start to use FindMyAddress.

You can make test on playground.

Installing

Package Manager

npm install git+ssh://git@gitlab.iraiser.eu:suite/front/find-my-address.git

CDN

<head>
    <link href="https://assets.iraiser.eu/find-my-address/5.0.0/find-my-address.min.css" rel="stylesheet">
    <script src="https://assets.iraiser.eu/find-my-address/5.0.0/find-my-address.min.js"></script>
</head>

You can choose one specific version like: 5.0.0, 5.0, 5.x or latest.

Usage

Styles

@use "@iraiser/find-my-address/styles";

Configuration

@use "@iraiser/find-my-address" with (
    $border-color: darkcyan
);

Options

Name	Default	Description
`$fill-color`	`#fff`	Sets a new default container fill color.
`$border-color`	`#969696`	Sets a new default border color.
`$border-width`	`1px`	Sets a new default border width.
`$border-radius`	`0 0 4px 4px`	Sets a new default border radius.
`$icon`	`base64(...)`	Sets a new default border radius.
`$icon-position`	`50% 50%`	Sets a new default border radius.

JavaScript

javascript

import { FindMyAddress } from '@iraiser/find-my-address';

let search = new FindMyAddress(document.querySelector('.search'));

Customization

CSS custom properties

CSS custom property	Description
`--fma-dropdown-background-color`	Change the dropdown background color.
`--fma-dropdown-border-color`	Change the dropdown border color.
`--fma-dropdown-border-radius`	Change the dropdown border radius.
`--fma-icon-background-image`	Change the icon url.
`--fma-icon-background-position`	Change the icon position.
`--fma-loader-color`	Change the loader color.
`--fma-loader-secondary-color`	Change the loader secondary color.

CSS classes

CSS Class	Description
`fma-search`	Main element
`fma-search--open`	Style element at open status.
`fma-search--close`	Style element at close status.
`fma-dropdown`	Indicates the dropdown container.
`fma-dropdown--active`	Style dropdown at active status.
`fma-dropdown__item`	Indicates the dropdown item container.
`fma-dropdown__item--empty`	Style item at empty status.
`fma-loader`	Indicates the loader container.

API

Sass mixins

Mixin	Description
`fill-color($color)`	Sets custom property with custom value for container fill color.
`outline-color($color)`	Sets custom property with custom value for outline color.
`radius($radius)`	Sets custom property with custom value for border radius.
`icon-url($url)`	Sets custom property with custom value for icon background url.
`icon-position($position)`	Sets custom property with custom value for icon background position.

Fill color with `find-my-address.fill-color()`

The following Sass...

@use "@iraiser/find-my-address";

:root {
    @include find-my-address.fill-color(#e1e1e1);
}

...will produce the following CSS...

:root {
    --fma-dropdown-background-color: #e1e1e1;
}

Outline color with `find-my-address.outline-color()`

The following Sass...

@use "@iraiser/find-my-address";

:root {
    @include find-my-address.outline-color(#e1e1e1);
}

...will produce the following CSS...

:root {
    --fma-dropdown-border-color: #e1e1e1;
}

Border radius with `find-my-address.radius()`

The following Sass...

@use "@iraiser/find-my-address";

:root {
    @include find-my-address.radius(0 0 6px 6px);
}

...will produce the following CSS...

:root {
    --fma-dropdown-border-radius: 0 0 6px 6px;
}

Icon url with `find-my-address.icon-url()`

The following Sass...

@use "@iraiser/find-my-address";

:root {
    @include find-my-address.icon-url('icon.png');
}

...will produce the following CSS...

:root {
    --fma-icon-background-image: url('icon.png');
}

Icon position with `find-my-address.icon-position()`

The following Sass...

@use "@iraiser/find-my-address";

:root {
    @include find-my-address.icon-position(center);
}

...will produce the following CSS...

:root {
    --fma-icon-background-position: center;
}

JavaScript API

Options

Name	Default	Description	Mandatory
`api` string	`''`	Select your API engine. `addok`, `loqate` or `fetchify`	Yes.
`key` string	`''`	Insert your API key.	Yes. Available only with `loqate` & `fetchify`.
`countries` array	`''`	Restrict API results on selected countries (ISO code 2). A single string, ex. `'FR'` or one array, ex. `['GB', 'NL']` display all available countries on selected API.	No. Available only with `loqate` & `fetchify`.
`limit` integer	`5`	Maximum of items display on dropdown.	No. Available with `loqate` & `addok`.
`loader` boolean	`true`	Display the loader.	No.
`reference` string	`''`	Reference element for dropdown position. Can only be a parent of input. element	No.
`width` string	`''`	Reference element for dropdown width. The `value` can be a `px` or `%`. element or value	No.
`placeholder` boolean, string	`true`	Allow or disallow the default placeholder displayed in input. The text is displayed according the `lang` attribute or, if missing, browser language.	No.
`noResultText` string	`''`	Custom text to display in dropdown when API return no results. By default, the text is displayed according to the attribute `lang` detected.	No.
`dropdownClass` string	`''`	Add class on dropdown main element.	No.
`dropdownItemClass` string	`''`	Add class on dropdown item element.	No.

Public methods

Name	Description
`destroy`	Destroy the instance.
`reload(options)`	Reload (with destroy) the instance. You can pass, new options if needed.

Callback

Name	Default	Description
`onProposal`	`none`	Return function when list of proposal addresses is populated.
`onComplete`	`data`	Return function when address is selected.
`onDestroy`	`none`	Return function when instance is destroyed.
`onError`	`error`	Return function when instance is on error.

JSON object

Example of object returned:

{
    "type": "Feature",
    "properties": {
        "label": "199 Route de Clisson 44230 Saint-Sébastien-sur-Loire",
        "housenumber": "199",
        "street": "Route de Clisson",
        "line1": "199 Route de Clisson",
        "line2": "",
        "line3": "",
        "line4": "",
        "line5": "",
        "postcode": "44230",
        "city": "Saint-Sébastien-sur-Loire",
        "citycode": "44190",
        "adminarea": "Loire-Atlantique",
        "adminareacode": "44",
        "province": "Pays de la Loire",
        "country": "France",
        "countrycode": "FR"
    }
}

Menu

Version 5.1.2