FindMyAddress

Find all address anywhere around the world. Many options for all possible cases & customize the style.

Getting Started

How start to use FindMyAddress.

You can play with demonstration located here.

Quick start (CDN)

html
<head>
    <link href="https://libs.iraiser.eu/libs/find-my-address/v{version}/find-my-address.min.css" rel="stylesheet">
    <script src="https://libs.iraiser.eu/libs/find-my-address/v{version}/find-my-address.min.js"></script>
</head>

You can choose one specific version by replacing tag {version}.

Installing locally (Package Manager)

NPM

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

Usage

Styles

sass
@use "~@iraiser/find-my-address/resources/sass/find-my-address";

JavaScript

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

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

Theming

You can easily add you own theme on each component.

Theming with CSS custom properties

Set custom styles on specific element in component:

sass
@use "~@iraiser/find-my-address/resources/sass/find-my-address";

:root {
    --fma-dropdown-border-color: #0971b3;
    --fma-dropdown-border-radius: 0;
}

Theming with Sass

Set custom styles on specific element in component:

sass
@use "~@iraiser/find-my-address/sass/find-my-address/components/dropdown" with (
    $border-color: #0971b3,
    $border-radius: 0
);

Style customization

CSS classes

CSS ClassDescription
fma-searchMain element
fma-search--openStyle element at open status.
fma-search--closeStyle element at close status.
fma-dropdownIndicates the dropdown container.
fma-dropdown--activeStyle element at active status.
fma-dropdown__item--emptyStyle element at empty status.
fma-dropdown__itemIndicates the dropdown item container.
fma-loaderIndicates the loader container.

CSS custom properties

CSS Custom propertyDescription
--fma-dropdown-background-colorChange the dropdown background color.
--fma-dropdown-border-colorChange the dropdown border color.
--fma-dropdown-border-radiusChange the dropdown border radius.
--fma-loader-colorChange the loader color.
--fma-loader-secondary-colorChange the loader secondary color.

JavaScript API

Options

NameDefaultDescriptionMandatory
api
string
''
"addok" or "loqate"
Select your API engine.Yes
key
string
''Insert your API key.Yes
Available only with "loqate".
countries
array
[]Restrict API results on selected countries (ISO code 2).
An empty array display all available countries on selected API.
No
Available only with "loqate".
origin
array
[]Order API results on selected countries (ISO code 2).No
limit
integer
5Maximum of items display on dropdown.No
language
string
enDisplay result on selected language from ISO code 2.No
Available only with "loqate".
loader
boolean
trueDisplay the loader.No
context
boolean
trueDisplay address context, if exist, on results list.No
Available only with "addok".
reference
string
''
element
Reference element for dropdown position. Can only be a parent of input.No
width
string
''
element or value
Reference element for dropdown width. The value can be a px or %.No
placeholder
string
trueAllow or disallow the default placeholder displayed in input. By default, the text is displayed according to the language option declared.No
placeholderText
boolean
''Custom text to display in input.No
noResultText
string
''Custom text to display in dropdown when API return no results. By default, the text is displayed according to the language option declared.No
dropdownClass
string
''Add class on dropdown main element.No
dropdownItemClass
string
''Add class on dropdown item element.No

Callback

NameDefaultDescription
onAddressProposalnoneReturn function when list of proposal addresses is populated.
onSelectedAddressdataReturn function when address is selected.
afterSelectedAddressnoneReturn function of after selected address.

Public Methods

NameDescription
destroyDestroy the instance.
reloadReload the instance. You can pass, if you need, new options on reload.

JSON object

Example of object returned:

json
{
    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"
    }
}