Display Address in One Line

Instead of writing each address attributes to individual fields, you may exercise fine control about how address data is presented using the onAddressRetrieved callback.

In this example, we merge the addresses and insert it to a textarea.

This code demonstrates how to integrate the Ideal Postcodes Address Finder and have the address result merged into a single input or textarea field. The onAddressRetrieved callback function that is executed when an address is successfully retrieved from the API. The function takes the address object as a parameter, which contains the address data returned by the API. Inside the onAddressRetrieved function, the address data is filtered to remove any empty elements and joined with a newline character to create a formatted address string. The formatted address string is then assigned as the text content of the element with the ID output_field using document.getElementById("output_field").textContent.

JavaScript

 
    AddressFinder.setup({
        apiKey: "ak_test",
        inputField: "#input",
        onAddressRetrieved: (address) => {
            const result = [
            address.line_1,
            address.line_2,
            address.line_3,
            address.post_town,
            address.postcode
            ]
            .filter((elem) => elem !== "")
            .join("
");
            document.getElementById("output_field").textContent = result;
        }
    });

HTML

    <form style="max-width: 450px; padding: 10px;">
        <h1>Address Form</h1>
        <label for="input">Search Your Address</label>
        <input type="text" id="input" placeholder="Start typing address here" />
        <label for="output_field">Address Output:</label>
        <pre id="output_field"></pre>
    </form>

Live Demo

Loading...