jQuery Plugin

The AFD Postcode Evolution (PCE) jQuery plugin allows AFD's range of data validation solutions to quickly and easily be added to front end jQuery based applications.

The plugin uses the jQuery data API, to make adding functionality to input controls simple. The plugin is also compatible with Bootstrap 3 & 4 form validation standards as well as the constraint validation API.

Fully configurable, the plugin allows developers to implement the desired AFD solution with flexibility. In most cases, the out of the box code will be exactly what is required.

Customistion options include:

  • Line Squeeze - condense address fields to meet specific formatting requirements
  • Hide Address Fields Before Searching - initially hide fields to remove clutter and avoid confusion
  • Hide Empty Address Fields - only display form fields that are used by that address
  • Match Highighting - when searching for an address hightlight the matching fragment in the results list
  • Manual Input - option for users to manually enter their address
  • Single Result Selection - single keypress selection when there is only one result
  • Customise Postcode Position - display postcode at either beginning or end of results list
  • Number of Results - customise the number results shown in the results list

Examples

Start of by downloading the latest version of the AFD jQuery plugin:

http://download.afd.co.uk/web/integrations/jquery/afd.jquery.1.8.4.zip

Address Lookup

The following is a simple example of a TypeAhead control and some result fields.

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="afd.jquery.1.8.4.js"></script>
  <script>
    afdOptions = {
    id: "YOUR_ID",
    token: "YOUR_TOKEN",
	pceUrl: "https://apps.afd.co.uk/json"
  };
  </script>
  <link type="text/css" rel="stylesheet" href="jquery.typeahead.afd.css">
  <style>
    .afd-typeahead-list{max-height: 185px;overflow: auto;}
  </style>
<head>
<body>
  <div class="afd-typeahead-container">
    <div class="afd-typeahead-field">
      <div class="afd-typeahead-query">
        <input
          type="search"
          autocomplete="off"
          data-afd-control="typeahead">
      </div>
    </div>
  </div>
  <div class="form-control">
    <label for="Postcode">Postcode:</label>
    <input data-afd-result="Postcode" id="postcode">
  </div>
  <div class="form-control">
    <label for="property">Property:</label>
    <input data-afd-result="Property" id="property">
  </div>
    <div class="form-control">
      <label for="street">Street:</label>
      <input data-afd-result="Street" id="street">
    </div>
    <div class="form-control">
      <label for="town">Town:</label>
      <input data-afd-result="Town" id="town">
    </div>
</body>

This simple markup now has full TypeAhead functionality.

Validation

The following is an example of how to add phone number validation:

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="afd.jquery.1.8.4.js"></script>
  <script>
    afdOptions = {
      id: "YOUR_ID",
      token: "YOUR_TOKEN",
	  pceUrl: "https://apps.afd.co.uk/json"
    };
  </script>
<head>
<body>
  <div class="form-control">
    <label for="phone">Phone Number:</label>
	<input data-afd-result="phone" id="phone">
  </div>
  <style>
    .afd-valid{
      color: green;
    }
    .afd-invalid{
      color: red;
    }
  </style>
</body>

Get Started

We offer both a hosted version of PCE and a local installed version. To get started with either of these please request an evaluation.

 

 

Documentation