Auto Complete Widget in AEM Forms

autocomplete.js

//Refer to the detailed working of autocomplete widget, if you are lost with the below javascript code.
//addressLookup is the name of widget
//Creating a widget extending the textfield.
    $.widget( "xfaWidget.addressLookup", $.xfaWidget.textField, {
        _widgetName:"addressLookup",
        //overriding render function of text field.
        render : function() {
            var $control = $.xfaWidget.defaultWidget.prototype.render.apply(this, arguments);
            if($control){
                $control.autocomplete({
                    source: function( request, response ) {
                        $.ajax({
                            url: "", //***add the url to get the list (probably json)
                                response( $.map( data, function( item ) {
                                    return {
                                        label: "",//***label of item
                                        value: "",//***value of item
                                        id: ""//***id of item
                                    }
                                }));
                            }
                        });
                    },
                    //number of letters after which you want to send first autocomplete call
                    minLength: 4,
                    select: function (event, ui) {
                        //***update the fields you want to update on select
                    },
                    open: function() {
                        $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
                    },
                    close: function() {
                       $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
                    }
                });
            }
            return $control;
        }
    });
})(jQuery);