问题描述
我正在使用 TomTom FuzzySearch/Autocomplete 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');
});
});
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）