Semantics

Necessary HTML-elements (with the supplied CSS class).
NOTE: If you just use the default skin (see , this semantic is NOT needed.

‍

Mandatory input-fields (<input>)

• Street name (streetInput)
• Street number (streetNumberInput)
• Floor (floorInput)
• Flat (householdInput)

Mandatory containers (<div>) (will be populated)

An empty div that will be populated with all the alternatives to select from.

• streetContainer - Will be populated with streets.
• streetNumberContainer - Will be populated with gatenr.
• floorContainer - Will be populated with floors.
• householdContainer - Will be populated with flats.

Mandatory fields (will be populated)

Will both be populated when user choses street number.

• zipLabel
• cityLabel

Optional fields (will be populated)

• floorLabel - Will be populated when user choses floor.
• floorTypeLabel - Will be populated when user choses floor.
• flatNumberLabel - Will be populated when user choses flat.

Other optional fields

• streetInputHint - Scrolling down the streetInput will toggle the class visible on this element.

‍

Example

<div id="my-address-helper">
   <input type="hidden" class="selectionCache">
   <p>
      <span class="streetInputHint">Skriv <em>,</em> og <em>POSTSTED</em> for å filtrere mer</span>
      <input class="streetInput" placeholder="Street">
      <div class="streetContainer"></div>
   </p>
   <p>
      <input class="streetNumberInput" placeholder="StreetNo">
      <div class="streetNumberContainer"></div>
   </p>
   <p>
      <input class="floorInput" placeholder="Floor">
      <div class="floorContainer"></div>
   </p>
   <p>
      <input class="householdInput" placeholder="Flat">
      <div class="householdContainer"></div>
   </p>
   <p>
      <span class="zipLabel"></span> <span class="cityLabel"></span> 
   </p>
</div>

‍

Example styles

.streetInputHint{
  display: none;
  opacity: .5;
}

.streetInputHint.visible{
  display: inline;
}

‍

‍