Magento 2 : City Auto complete

Copy<div class="field city required">
            <label class="label" for="city"><span><?= /* @noEscape */ $block->getAttributeData()->getFrontendLabel('city') ?></span></label>
            <div class="control">
                <input type="text"
                       name="city"
                       value="<?= $block->escapeHtmlAttr($block->getAddress()->getCity()) ?>"
                       title="<?= $block->escapeHtmlAttr(__('City')) ?>"
                       placeholder="<?= $block->escapeHtmlAttr(__('First three letters...')) ?>"
                       class="input-text <?= $block->escapeHtmlAttr($this->helper(\Magento\Customer\Helper\Address::class)->getAttributeValidationClass('city')) ?>"
                       id="city" data-mage-init='{"city-search":{}}'/>
            </div>
        </div>

Copydefine([
    'jquery',
    'mage/url',
    'jquery/ui'

], function ($,urlbuild) {
    'use strict';

    $.widget('namespace.widgetname', {
        options: {
            autocomplete: 'off',
            minSearchLength: 2,
        },

        _create: function () {
            this.element.attr('autocomplete', this.options.autocomplete);
            $(this.element).autocomplete({
                source: function( request, response ) {
                    $.ajax( {
                        url: urlbuild.build('/ancustomer/city/search'),
                        dataType: "json",
                        data: {
                            term: request.term
                        },
                        success: function( data ) {
                            response( data );
                        }
                    } );
                },
                minLength: 3,
                // appendTo: "#city_results"
            });
        },

        // Private method (begin with underscore)
    });

    return $.namespace.widgetname;
});

Copy
define([
    'Magento_Ui/js/form/element/abstract',
    'mage/url',
    'ko',
    'jquery',
    'jquery/ui'
], function (Abstract, url, ko, $) {
    'use strict';

    ko.bindingHandlers.cityAutoComplete = {

        init: function (element, valueAccessor) {

            // valueAccessor = { selected: mySelectedOptionObservable, options: myArrayOfLabelValuePairs }
            var settings = valueAccessor();

            var selectedOption = settings.selected;
            var options = settings.options;
            var updateElementValueWithLabel = function (event, ui) {
                // Stop the default behavior
                event.preventDefault();

                // Update the value of the html element with the label
                // of the activated option in the list (ui.item)
                $(element).val(ui.item.label);



                // Update our SelectedOption observable
                if(typeof ui.item !== "undefined") {
                    // ui.item - id|label|...
                    selectedOption(ui.item);
                    //selectedValue(ui.item.value);
                }
            };

            $(element).autocomplete({
                source: options,
                select: function (event, ui) {
                    updateElementValueWithLabel(event, ui);
                }
            });

        }
    };

    return Abstract.extend({
        selectedCity: ko.observable(''),

        getCities: function( request, response ) {

            $.ajax({
                url: url.build('/ancustomer/city/search'),
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function( data ) {
                    response( data );
                }
            });
        }
    });
});

Copy<input class="admin__control-text" type="text"
   data-bind="
    cityAutoComplete: {
        selected: selectedCity,
        options: getCities
    },
    event: {change: userChanges},
    value: value,
    hasFocus: focused,
    valueUpdate: valueUpdate,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': noticeId,
        id: uid,
        disabled: disabled
}"/>

Copydefine([
    'jquery',
    'jquery/ui'
], function ($) {
    'use strict';

    return function (data) {

        $.widget('mage.menu', data.menu, {
            _create: function () {
                $(this.element).data('ui-menu', this);
                this._super();
            }
        });

        data.menu = $.mage.menu;

        return data;
    };
});

Copyvar config = {
    paths: {
        'city-search': 'Vendor_Customer/js/city-search'
    },
    config: {
        mixins: {
            'mage/menu': {
                'Vendor_Customer/js/lib/mage/menu-mixin': true
            }
        }
    }
};