Purpose
 You want to support the user when entering addresses by making suggestions during the input.

We show this by means of the address entry in transaction BP - Business Partner:
Solution
 Autocomplete is a feature of the Places library in the Google Maps JavaScript API. You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field. The autocomplete service can match on full words and substrings, resolving place names, addresses, and plus codes. Applications can therefore send queries as the user types, to provide on-the-fly place predictions.

Requirements:
As you need an API key for the Google Service, you may need to create an account in the Google Cloud Platform. At present, use is free of charge up to a relatively generous quota.

Essentially, with the GuiXT controls, you embed an HTML page that includes some JavaScript and calls the Google service for address completion. After the user selects an address from the list, a GuiXT JavaScript object is used to insert the parts of the address into the corresponding fields on the SAP screen.
Implementation
 We define the API key and the filename of the InputScript, that will be started when the user selects an address from the list of suggestions. Occurrences of the corresponding placeholders in the HTML template are automatically replaced with the corresponding values.

In this example, the placeholders &[apikey] and &[inputscript] are replaced with the values that we assign to the GuiXT variables apikey and inputscript.

GuiXT Script
GuiXT 
// Enter your Google API key here
Set   V[apikey]   "myAPIkey"
 
// Define an InputScript to run after seleting an address
Set   V[inputscript]   "UpdateAddress.txt"
 
// Generate the HTML file from the template
CopyText  _ 
   fromTemplate="C:\guixtscripts\html\autocomplete_template.html"  _     
   toText="temp"
 
CopyText  _ 
   fromText="temp"  _ 
   toFile="C:\guixtscripts\html\autocomplete.html"
 
// Embed the Google HTML file
WebView     (21.6,2.8)     (26.8,77)  _
   "C:\guixtscripts\html\autocomplete.html"  _
   -closeOnHide      name="googleaddress"    
 
// Connect it to GuiXT
connecthtml   name="googleaddress"

(The Google API can no longer be used with the Internet Explorer Control - GuiXT command "control" - but only works with the WebView.)


InputScript "AutoComplete.txt"
GuiXT 
// Set address data from Google API
Set   F[ADDR1_DATA-STREET]     "&V[route]"
Set   F[ADDR1_DATA-HOUSE_NUM1]   "&V[street_number]"
Set   F[ADDR1_DATA-CITY1]    "&V[locality]"
Set   F[ADDR1_DATA-POST_CODE1]    "&V[postal_code]"
Set   F[ADDR1_DATA-REGION]   "&V[administrative_area_level_1]"
Set   F[ADDR1_DATA-COUNTRY]   "&V[country]"


Autocomplete_template.html
HTML

Explanation of options:
  • You can choose the language of the UI and suggestions with the "language=" parameter in the script tag.
  • Use the "optionsAuto" object to define options and restrictions. In this example, we only allow results from germany and switzerland.
Please also have a look at the API documentation for further options and details:
Google Maps Platforrm - Places Autocomplete

Download:

 All files for this project can be downloaded here:
google_guixt_autocomplete.zip
Components InputAssistant+Controls