jQuery Plugin

The AFD Postcode Evolution (PCE) jQuery plugin makes it easy to quickly add TypeAhead and advanced field validation 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.

Examples

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

http://download.afd.co.uk/web/integrations/jquery/afd.jquery-1.0.2.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.js"></script>
  <script>
    afdOptions = {
    serial: "YOUR_SERIAL",
    password: "YOUR_PASSWORD"
  };
  </script>
  <link type="text/css" rel="stylesheet" href="jquery.typeahead.afd.css">
<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.js"></script>
  <script>
    afdOptions = {
      serial: "YOUR_SERIAL",
      password: "YOUR_PASSWORD"
    };
  </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