The plugin can be downloaded from here:
- Easy to integrate!
- Uses jQuery and Twitter Bootstrap 3.
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:
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
- thoroughfare_and_descriptor - generally that's the street / road name along with its descriptor, for example Harbour Road.
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: