TomTomAPI-input有值,但保持不变

nnsrf1az  于 2021-09-29  发布在  Java
关注(0)|答案(0)|浏览(333)

我使用tomtom fuzzysearch/autocomplete api,允许用户在表单上搜索地址,然后当用户选择地址时,地址输入字段将预填充(地址值)。
我的api调用工作得非常好,输入字段显示正确的值。
我的问题是,输入字段仍然存在 untouched ,尽管字段具有值(如果我打字 document.getElementById("house-number-textbox").value ,则返回一个值)。
当应用输入值时,如何打开要触摸的输入字段?
我注意到,如果我在输入字段中输入了一些东西,在我的输入值被添加之后,表单才会将我的输入注册为有效/被触摸。
ps-我注入脚本的原因是因为我使用的是ab测试工具。因此,尽管表单/应用程序是angularjs,但我只能通过ab测试工具来操作表单(在编译的代码库之上-因此我使用vanilla js)。
这是我的密码:

  1. function waitForElement(className, callBack){
  2. window.setTimeout(function(){
  3. var element = document.getElementById(className);
  4. if(element) {
  5. callBack(className, element);
  6. } else {
  7. waitForElement(className, callBack);
  8. }
  9. },2000)
  10. };
  11. // LOAD API SCRIPTS
  12. function loadScript(scriptUrl) {
  13. const script = document.createElement('script');
  14. script.src = scriptUrl;
  15. document.body.appendChild(script);
  16. return new Promise((res, rej) => {
  17. script.onload = function() {
  18. res();
  19. }
  20. script.onerror = function () {
  21. rej();
  22. }
  23. });
  24. };
  25. // RESULTS MANAGER
  26. function appendParentSelector(parentSelector, selector) {
  27. return parentSelector ? parentSelector + ' ' + selector : selector;
  28. }
  29. function ResultsManager(resultsElementSelector) {
  30. this.resultsElement = document.querySelector(appendParentSelector(resultsElementSelector, '.js-results'));
  31. this.resultsPlaceholder =
  32. document.querySelector(appendParentSelector(resultsElementSelector, '.js-results-placeholder'));
  33. this.resultsLoader = document.querySelector(appendParentSelector(resultsElementSelector, '.js-results-loader'));
  34. }
  35. ResultsManager.prototype.loading = function() {
  36. this.resultsLoader.removeAttribute('hidden');
  37. this.resultsElement.setAttribute('hidden', 'hidden');
  38. this.resultsPlaceholder.setAttribute('hidden', 'hidden');
  39. this.resultsElement.innerHTML = '';
  40. };
  41. ResultsManager.prototype.success = function() {
  42. this.resultsLoader.setAttribute('hidden', 'hidden');
  43. this.resultsElement.removeAttribute('hidden');
  44. };
  45. ResultsManager.prototype.resultsNotFound = function() {
  46. this.resultsElement.setAttribute('hidden', 'hidden');
  47. this.resultsLoader.setAttribute('hidden', 'hidden');
  48. this.resultsPlaceholder.removeAttribute('hidden');
  49. };
  50. ResultsManager.prototype.append = function(element) {
  51. this.resultsElement.appendChild(element);
  52. };
  53. ResultsManager.prototype.clear = function() {
  54. for (var i = 0; i < this.resultsElement.children.length; i++) {
  55. this.resultsElement.removeChild(this.resultsElement.children[i]);
  56. }
  57. };
  58. waitForElement("house-number-textbox",function(){
  59. console.log("WAIT FOR ELEMENT DONE");
  60. window.ResultsManager = window.ResultsManager || ResultsManager;
  61. console.log("document.getElementById(component)", document.getElementById("house-number-textbox") );
  62. // use
  63. loadScript('https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/SearchBox/2.24.2//SearchBox-web.js')
  64. .then(() => {
  65. console.log('Script loaded!');
  66. })
  67. .catch(() => {
  68. console.error('Script loading failed! Handle this error');
  69. });
  70. // use
  71. loadScript('https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.64.0/services/services-web.min.js')
  72. .then(() => {
  73. console.log('Script loaded!');
  74. // HANDLE RESULTS
  75. tt.setProductInfo('ABTest', '1');
  76. // Options for the fuzzySearch service
  77. var searchOptions = {
  78. key: 'XXX',
  79. language: 'en-Gb',
  80. limit: 10,
  81. countrySet: "GB"
  82. };
  83. var searchBoxOptions = {
  84. minNumberOfCharacters: 1,
  85. searchOptions: searchOptions
  86. // autocompleteOptions: autocompleteOptions
  87. };
  88. var ttSearchBox = new tt.plugins.SearchBox(tt.services, searchBoxOptions);
  89. document.querySelector('.tt-side-panel__header').appendChild(ttSearchBox.getSearchBoxHTML());
  90. let componentForm = {
  91. // streetName: "house-number-textbox",
  92. municipalitySubdivision: "street-name-textbox",
  93. localName: "town-city-textbox",
  94. extendedPostalCode: "postcode-textbox"
  95. };
  96. function SidePanel(selector) {
  97. // this.map = map;
  98. this.element = document.querySelector(selector);
  99. }
  100. new SidePanel('.tt-side-panel');
  101. var resultsManager = new ResultsManager();
  102. ttSearchBox.on('tomtom.searchbox.resultscleared', handleResultsCleared);
  103. ttSearchBox.on('tomtom.searchbox.resultsfound', handleResultsFound);
  104. ttSearchBox.on('tomtom.searchbox.resultfocused', handleResultSelection);
  105. ttSearchBox.on('tomtom.searchbox.resultselected', handleResultSelection);
  106. function handleResultsCleared() {
  107. resultsManager.clear();
  108. }
  109. // HANDLE RESULST
  110. function handleResultsFound(event) {
  111. // Display fuzzySearch results if request was triggered by pressing enter
  112. if (event.data.results && event.data.results.fuzzySearch && event.data.metadata.triggeredBy === 'submit') {
  113. var results = event.data.results.fuzzySearch.results;
  114. if (results.length === 0) {
  115. handleNoResults();
  116. }
  117. resultsManager.success();
  118. console.log("results", results);
  119. }
  120. if (event.data.errors) {
  121. console("event.data.errors", event.data.errors);
  122. }
  123. }
  124. // RESPONSE
  125. function handleResultSelection(event) {
  126. if (isFuzzySearchResult(event)) {
  127. // Display selected result on the map
  128. var result = event.data.result;
  129. console.log("THIS result", result);
  130. ;
  131. resultsManager.success();
  132. for (const component in componentForm) {
  133. console.log("componentForm", componentForm);
  134. document.getElementById(componentForm[component]).value = result.address[component];
  135. document.getElementById(componentForm[component]).disabled = false;
  136. console.log('component', componentForm[component]);
  137. if (document.getElementById(componentForm[component]).value === 'undefined') {
  138. document.getElementById(componentForm[component]).value = "";
  139. }
  140. };
  141. if (result.address.streetNumber) {
  142. document.getElementById("house-number-textbox").value = result.address.streetNumber + " " + result.address.streetName;
  143. } else {
  144. document.getElementById("house-number-textbox").value = result.address.streetName;
  145. };
  146. };
  147. }
  148. function isFuzzySearchResult(event) {
  149. return !('matches' in event.data.result);
  150. }
  151. function handleNoResults() {
  152. resultsManager.clear();
  153. resultsManager.resultsNotFound();
  154. searchMarkersManager.clear();
  155. infoHint.setMessage(
  156. 'No results for "' +
  157. ttSearchBox.getValue() +
  158. '" found nearby. Try changing the viewport.'
  159. );
  160. };
  161. document.querySelector(".tt-search-box-input").setAttribute("placeholder", "Enter your address...");
  162. })
  163. .catch(() => {
  164. console.error('Script loading failed! Handle this error');
  165. });

});

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题