Not able to load 3rd party JS in LWC

Question

I'm new to LWC and trying to create a simple LWC component with input field. I have loaded 3rd party zip folder in Static Resource which contain JS and CSS file.

Scenario - If user types street name into input field then I want to populate address suggestion using 3rd party JS library.

Currently I'm not able to populate below is the screenshot.

Below is the screenshot of component what I'm expecting output using 3rd party JS.

Below is the code in LWC

<template>
    <div class="slds-p-around_medium">
        <label class="slds-form-element__label">Street Address</label>
        <input id="streetAddress" name="streetAddress" class="slds-input" type="text" lwc:dom="manual" placeholder="Address Search" value={postalCodeFieldValue}/>
    </div>
</template>

JS

import { LightningElement } from 'lwc';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import addresscompleteResource from '@salesforce/resourceUrl/addresscomplete';
export default class VS_PostalCode extends LightningElement {

    postalCodeFieldValue='';
    jsInitialized=false;

    connectedCallback() {
        console.log("connectedCallbac1");
        if (this.jsInitialized) {
            return;
        }
        this.jsInitialized = true;
        Promise.all([
            loadStyle(this, addresscompleteResource + '/addresscomplete.css'),
            loadScript(this, addresscompleteResource + '/addresscomplete.js')
        ])
            .then(() => {
                this.callAddressCompleteJS();
            });

    }
    callAddressCompleteJS() {
        var fields = [
            { element: "streetAddress", field: "Line1" }
        ],
            options = {
                key: "UE16-PK48-CT42-MD73"
            },
            control = new pca.Address(fields, options);
        control.listen("populate", function (address) {
            alert(JSON.stringify(address));
        });
    }
}

Answer 1

The script can't find the element by Id, so it won't know which element to attach to. At minimum, you need to dynamically grab the Id:

const fields = [
  { element: this.template.querySelector('input[name=streetAddress]').id, field: 'Line1' }
];

This is required because the ID values are generated dynamically during runtime, so you can't possibly predict the ID ahead of time. I checked the documentation, it doesn't seem to allow simply passing in an element, which would be ideal, so this is the next best solution.

Alternatively, consider just using their API and writing your own UI; this may be more efficient in terms of ease of use, although this appears to be a metered API, so I can't speak for its cost.