Bias By Postcode Outward

Static Postcode Outward

Display address results that closely matches the chosen postcode outward value.

It will still display unmatched addresses but they will be ranked lower.

The queryOptions object allows customizing the search query. In this example, the bias_postcode_outward property is set to "NW1" to bias the search results towards the NW1 postcode outward code.

JavaScript

 
AddressFinder.setup({
    apiKey: "ak_test",
    queryOptions: {
        bias_postcode_outward: "NW1"
    },
    outputFields: {
        organisation_name: "#organisation"
        line_1: "#first_line",
        line_2: "#second_line",
        line_3: "#third_line",
        post_town: "#post_town",
        postcode: "#postcode",
    }
});

HTML

<form style="max-width: 450px; padding: 10px;">
    <h1>Address Form</h1>
    <label for="line_1">Address First Line</label>
    <input type="text" id="line_1" />
    <label for="line_2">Address Second Line</label>
    <input type="text" id="line_2" />
    <label for="line_3">Address Third Line</label>
    <input type="text" id="line_3" />
    <label for="post_town">Town or City</label>
    <input type="text" id="post_town" />
    <label for="postcode">Postcode</label>
    <input type="text" id="postcode" />
</form>

Live Demo (Static Postcode Outward)

Loading...

Dynamically Updating Bias

The example below includes an event listener, which allows users to dynamically change the bias. When the value of the input field changes, setQueryOptions function is used to apply the new bias.

JavaScript

 
const c = AddressFinder.setup({
    apiKey: "iddqd",
    queryOptions: {
        bias_postcode_outward: "sw1a"
    },
    outputFields: {
        line_1: "#line_1",
        line_2: "#line_2",
        line_3: "#line_3",
        post_town: "#post_town",
        postcode: "#postcode"
    }
    });
    const bias = document.getElementById("bias_postcode");
    bias.addEventListener("change", (e) => {
    c.setQueryOptions({
        bias_postcode_outward: e.target.value
    });
});

HTML

<form style="max-width: 450px; padding: 10px;">
    <h1>Address Form</h1>
    <label>Suggest Addresses with Postcode:</label>
    <input type="text" id="bias_postcode" />
    <label for="line_1">Address First Line</label>
    <input type="text" id="line_1" />
    <label for="line_2">Address Second Line</label>
    <input type="text" id="line_2" />
    <label for="line_3">Address Third Line</label>
    <input type="text" id="line_3" />
    <label for="post_town">Town or City</label>
    <input type="text" id="post_town" />
    <label for="postcode">Postcode</label>
    <input type="text" id="postcode" />
</form>

Live Demo (Dynamic Postcode Outward)

Loading...