18/07/2019

To make it as easy as possible for businesses to accept and display 3 word addresses, we’ve made it simple to add a what3words input field with AutoSuggest, address validation and country clipping – with just two lines of code.

Here’s a quick walk through of how it works.

AutoSuggest 

Our AutoSuggest component is a versatile input field that can be used within JavaScript web sites for a range of uses, from checkout pages, to a search bar for ride-hailing, or adding to forms for census data collection.

The result

 

Tip: type your 3 word address in the box above and see how it works.

 

The code

<script src=”https://assets.what3words.com/sdk/v3/what3words.js?key=YOUR_API_KEY></script>

<what3words-autosuggest/>

View our tutorial here

The input uses the powerful features of the what3words API V3 to provide accurate suggestions as the user enters a 3 word address. These suggestions can be refined to only display results from specific countries.

The input also contains validation to check whether the inputted text is a valid 3 word address and alerts the user if the 3 word address is not valid. The HTML attributes of the element can be used to further customise the element with the ability to adjust characteristics such as placeholder text, the number of suggested results, country clipping and focus. Simply adding the property, for example,clipToCountry=”GB” restricts results to the United Kingdom. Event handlers can also be harnessed to enable page content to be dynamically changed once text has been input.

Learn how to customise the attributes of the input or use event handlers in this tutorial.

How does the component work?

The AutoSuggest component and the embed code generator are both part of our what3words.js product, which provides a developer kit for JavaScript. They make use of web components to create custom elements with their own HTML tags that can be rendered on a standard HTML web page and supported by modern internet browsers. HTML attributes can be used to adjust the appearance and functionality of a component.

We used StencilJS to build 100% web standards compliant components that are small,  performant and versatile. StencilJS powers the Ionic Framework used for cross-platform development and was a great choice to ensure we could build and deploy lightweight components compatible with a wide range of browsers.

The custom components can be used within all of the major JavaScript frameworks, for example React, Angular or no framework at all. You can load the components into a site using a script tag in the header of a site.

 

Getting started with our component

This tutorial outlines the steps to adding what3words to your site and how the element can be customised using HTML properties.

 

Join us!

Interested in developing exciting products using new technologies to make an impact on hundreds of thousands of people around the world?

Our team is on a mission to create the global standard for communicating location. We’re making the world an easier, more efficient and safer place for everyone.

You’ll be joining a group of talented people from all over the world on an unprecedented journey. Every day brings new challenges and we are always learning. At what3words, you will be proud to see your individual and team contributions making a real difference.

Visit our Jobs page to find out more.

We’re looking forward to adding more new and exciting components over the coming months.