javascript - TomTom API - 输入具有价值但保持不变

Question

我正在使用 TomTom FuzzySearch/Autocomplete API，以允许用户在表单上搜索地址，然后当用户选择地址时，地址输入字段将预先填充（使用地址值）。

我的 API 调用工作正常，输入字段显示正确的值。

我遇到的问题是输入字段仍然存在untouched，尽管字段具有值。（如果我键入document.getElementById("house-number-textbox").value，则返回一个值）。

应用输入值时，如何转动要触摸的输入字段？

我注意到，如果我在输入字段中输入内容，在添加了我的输入值之后，表单才会将我的输入注册为有效/已触摸。

PS - 我注入脚本的原因是因为我使用的是 AB 测试工具。因此，尽管表单/应用程序是 AngularJS，但我只能通过 AB 测试工具来操作表单（在已编译的代码库之上 - 因此我使用 vanilla JS）。

这是我的代码：

function waitForElement(className, callBack){
    window.setTimeout(function(){
        var element = document.getElementById(className);
        if(element) {
            callBack(className, element);
        } else {
            waitForElement(className, callBack);
        }
    },2000)
};

// LOAD API SCRIPTS
function loadScript(scriptUrl) {
    const script = document.createElement('script');
    script.src = scriptUrl;
    document.body.appendChild(script);

    return new Promise((res, rej) => {
      script.onload = function() {
        res();
      }
      script.onerror = function () {
        rej();
      }
    });
};


// RESULTS MANAGER
function appendParentSelector(parentSelector, selector) {
    return parentSelector ? parentSelector + ' ' + selector : selector;
}


function ResultsManager(resultsElementSelector) {
    this.resultsElement = document.querySelector(appendParentSelector(resultsElementSelector, '.js-results'));
    this.resultsPlaceholder =
        document.querySelector(appendParentSelector(resultsElementSelector, '.js-results-placeholder'));
    this.resultsLoader = document.querySelector(appendParentSelector(resultsElementSelector, '.js-results-loader'));
}

ResultsManager.prototype.loading = function() {
    this.resultsLoader.removeAttribute('hidden');
    this.resultsElement.setAttribute('hidden', 'hidden');
    this.resultsPlaceholder.setAttribute('hidden', 'hidden');
    this.resultsElement.innerHTML = '';
};

ResultsManager.prototype.success = function() {
    this.resultsLoader.setAttribute('hidden', 'hidden');
    this.resultsElement.removeAttribute('hidden');
};

ResultsManager.prototype.resultsNotFound = function() {
    this.resultsElement.setAttribute('hidden', 'hidden');
    this.resultsLoader.setAttribute('hidden', 'hidden');
    this.resultsPlaceholder.removeAttribute('hidden');
};

ResultsManager.prototype.append = function(element) {
    this.resultsElement.appendChild(element);
};

ResultsManager.prototype.clear = function() {
    for (var i = 0; i < this.resultsElement.children.length; i++) {
        this.resultsElement.removeChild(this.resultsElement.children[i]);
    }
};


waitForElement("house-number-textbox",function(){
    console.log("WAIT FOR ELEMENT DONE");
    window.ResultsManager = window.ResultsManager || ResultsManager;

    console.log("document.getElementById(component)", document.getElementById("house-number-textbox") );

      // use
      loadScript('https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/2.24.2//SearchBox-web.js')
        .then(() => {
          console.log('Script loaded!');
        })
        .catch(() => {
          console.error('Script loading failed! Handle this error');
        });

        // use
        loadScript('https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.64.0/services/services-web.min.js')
        .then(() => {
            console.log('Script loaded!');

                     // HANDLE RESULTS
        tt.setProductInfo('ABTest', '1');
        // Options for the fuzzySearch service
        var searchOptions = {
            key: 'XXX',
            language: 'en-Gb',
            limit: 10,
            countrySet: "GB"
        };


        var searchBoxOptions = {
            minNumberOfCharacters: 1,
            searchOptions: searchOptions
            // autocompleteOptions: autocompleteOptions
        };
        var ttSearchBox = new tt.plugins.SearchBox(tt.services, searchBoxOptions);
        document.querySelector('.tt-side-panel__header').appendChild(ttSearchBox.getSearchBoxHTML());


        let componentForm = {
            // streetName: "house-number-textbox",
            municipalitySubdivision: "street-name-textbox",
            localName: "town-city-textbox",
            extendedPostalCode: "postcode-textbox"
        };

        function SidePanel(selector) {
            // this.map = map;
            this.element = document.querySelector(selector);
        }

        new SidePanel('.tt-side-panel');
        var resultsManager = new ResultsManager();

        ttSearchBox.on('tomtom.searchbox.resultscleared', handleResultsCleared);
        ttSearchBox.on('tomtom.searchbox.resultsfound', handleResultsFound);
        ttSearchBox.on('tomtom.searchbox.resultfocused', handleResultSelection);
        ttSearchBox.on('tomtom.searchbox.resultselected', handleResultSelection);

        function handleResultsCleared() {
            resultsManager.clear();
        }

        // HANDLE RESULST
        function handleResultsFound(event) {
            // Display fuzzySearch results if request was triggered by pressing enter
            if (event.data.results && event.data.results.fuzzySearch && event.data.metadata.triggeredBy === 'submit') {
                var results = event.data.results.fuzzySearch.results;

                if (results.length === 0) {
                    handleNoResults();
                }
                resultsManager.success();
                console.log("results", results);
            }

            if (event.data.errors) {
                console("event.data.errors", event.data.errors);
            }
        }

        // RESPONSE
        function handleResultSelection(event) {
            if (isFuzzySearchResult(event)) {
                // Display selected result on the map
                var result = event.data.result;
                console.log("THIS result", result);
;
                resultsManager.success();

                for (const component in componentForm) {
                    console.log("componentForm", componentForm);

                    document.getElementById(componentForm[component]).value = result.address[component];
                    document.getElementById(componentForm[component]).disabled = false;
                    console.log('component', componentForm[component]);

     

           if (document.getElementById(componentForm[component]).value === 'undefined') {
                    document.getElementById(componentForm[component]).value = "";
                }
            };

            if (result.address.streetNumber) {
                document.getElementById("house-number-textbox").value = result.address.streetNumber + " " + result.address.streetName;
            } else {
                document.getElementById("house-number-textbox").value = result.address.streetName;
            };
        };
    }

    function isFuzzySearchResult(event) {
        return !('matches' in event.data.result);
    }

    function handleNoResults() {
        resultsManager.clear();
        resultsManager.resultsNotFound();
        searchMarkersManager.clear();
        infoHint.setMessage(
            'No results for "' +
            ttSearchBox.getValue() +
            '" found nearby. Try changing the viewport.'
        );
    };
    document.querySelector(".tt-search-box-input").setAttribute("placeholder", "Enter your address...");


    })
    .catch(() => {
        console.error('Script loading failed! Handle this error');
    });

});