Melissa Data Integration

script.js

<script>
    window.onload = function () {
        // Function to poll for the existence of the input field
        function waitForElement(selector, callback) {
            const inputField = document.getElementsByName(selector)[0];
            if (inputField) {
                callback(inputField);
            } else {
                setTimeout(function () {
                    waitForElement(selector, callback);
                }, 100); // Check every 100ms if the element exists
            }
        }

        // Handle address input (0-1/address) and fetch data on each keystroke after 4 characters
        waitForElement('0-1/address', function (inputField) {
            inputField.addEventListener('input', function () {
                if (this.value.length > 4) {
                    fetchMelissaData(this.value);
                }
            });
        });

        // Function to fetch data from MelissaData API
        function fetchMelissaData(inputValue) {
            const apiUrl = `http://expressentry.melissadata.net/web/ExpressAddress?format=JSON&id=REPLACEWITHAPIKEY&line1=${encodeURIComponent(inputValue)}`;

            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    if (data && data.Results && data.Results.length > 0) {
                        showAddressOptions(data.Results);
                    } else {
                        console.error("No data returned from MelissaData");
                    }
                })
                .catch(error => console.error('Error fetching data from MelissaData:', error));
        }

        // Function to render address options below the input field
        function showAddressOptions(results) {
            // Remove any existing options box
            const existingBox = document.getElementById('address-options');
            if (existingBox) {
                existingBox.remove();
            }

            // Create a container for address options
            const optionsBox = document.createElement('div');
            optionsBox.id = 'address-options';
            optionsBox.style.border = '1px solid #ccc';
            optionsBox.style.backgroundColor = '#fff';
            optionsBox.style.position = 'absolute';
            optionsBox.style.zIndex = '1000';
            optionsBox.style.width = '500px';
            optionsBox.style.maxHeight = '150px';
            optionsBox.style.overflowY = 'auto';

            // Add each result as an option in the box
            results.forEach(result => {
                const option = document.createElement('div');
                option.textContent = `${result.Address.AddressLine1}, ${result.Address.City}, ${result.Address.State}, ${result.Address.PostalCode}`;
                option.style.padding = '8px';
                option.style.cursor = 'pointer';


                // Add click event to populate form fields when an option is clicked
                option.addEventListener('click', function () {
                    autoCompleteForm(result);
                    optionsBox.remove();
                });

                optionsBox.appendChild(option);
            });

            // Append the options box below the input field
            const inputField = document.getElementsByName('0-1/address')[0];
            inputField.parentNode.appendChild(optionsBox);
        }

        // Function to auto-populate form fields based on the selected option
        function autoCompleteForm(result) {
            const streetField = document.getElementsByName('0-1/address')[0]; // Address field
            const cityField = document.getElementsByName('0-1/city')[0];     // City field
            const stateField = document.getElementsByName('0-1/state')[0];   // State field
            const zipField = document.getElementsByName('0-1/zip')[0];       // ZIP field

            // Populate the fields with selected result data
            if (streetField && cityField && stateField && zipField) {
                streetField.value = result.Address.AddressLine1 || ''; 
                cityField.value = result.Address.City || '';
                stateField.value = result.Address.State || '';
                zipField.value = result.Address.PostalCode || '';
            } else {
                console.error('One or more fields (address, city, state, zip) not found');
            }
        }
    };
</script>