JavaScript Plugin

To make the integration with YesPostcodeSearch.co.uk address search API extremely easy, we have prepared a free-to-use JavaScript plugin.

The plugin can be downloaded from here:

Download Latest Version

Download Version 1.0.0

Features

  • Easy to integrate!
  • No form changes required. Just import the plugin and execute a single JavaScript statement!
  • Uses jQuery and Twitter Bootstrap 3.

Screenshots


Just 3 steps to go!

First, import jQuery and Bootstrap to your page if you don't use it yet (and it's very possible you already do!):

   ...
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
   ...
   <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

Second, import the YesPostcodeSearch.co.uk address search API plugin at the end of your page, just above the </body> tag:

<script src="//cdn.yespostcodesearch.co.uk/plugins/js/lookup/yespostcodesearch-lookup-latest.min.js"></script>

Third, enable the plugin for your form:

$("input#someId").postcodeProvider(MAPPINGS, KEY, VERSION)
$("input.someClass").postcodeProvider(MAPPINGS, KEY, VERSION)
$("input[name='some_name']).postcodeProvider(MAPPINGS, KEY, VERSION)

The KEY is your 40-characters API key.

The VERSION is the API version the plugin should use. Most users should currently go with 1.

The MAPPINGS is an object containing data type - destination field mappings. The types of data returned by the plugin are as follows:

  • post_town - town or city
  • building_name
  • building_number
  • thoroughfare_and_descriptor - generally that's the street / road name along with its descriptor, for example Harbour Road.
  • locality
  • county
  • country

And that's it! Your form will instantly allow to lookup the postcodes and fill all the address fields automatically!

Check out the sample implementation here: