How to implement auto completion of address when user types the address partially

Challenge:

There will be a situation, we may need to have the auto complete text box to get the values when user types partially. For eg:- the requirement would be complete the address when user types partially.

Solution:

This can be achieved easily by combining the KTA textbox and address API. There are number of API provides address search feature. We can invoke that in KTA when user types partially on the textbox.

This can be achieved with the below javscript.

Create the java script method and add the below code and call this method in the form load event of KTA Form.

var txtAddrLookupid = "#"+ thisForm.controlManager.getControlByName('txtAddrLookUp').id +"-inputEl"
$( txtAddrLookupid).autocomplete({
   source: getData,
   select: selectItem,
   minLength: 3
})

Here, we are making the KTA normal textbox to autocomplete text box. So, whenever user types something it will load the data related to the entered text. The data can be get from web service api
source: should have array of values. getData is the method which will execute and get the data from address API and return array of addresses
select: It get triggered when address is selected. Once selected, we can customize the data
minLength: It states when it should invoke the address API and list

Blog

How to implement auto completion of address when user types the address partially