Magento2 Checkout – Autocomplete Form Field Using Knockout.js

I have created a module to which autocompletes the city field of Magento. I am facing an issue which says

TypeError: Unable to process binding "shippingAutoComplete: function(){return {
        selected:selectedCity,options:getCities} }"

I have referred this thread to create my module Validation Error with jQuery-UI Autocomplete and KnockoutJs – Magento 2

Please let me know what mistakes I am doing here

Here is my module code:

<?php

namespace Vendor\ModuleName\Plugin\Checkout\Block\Checkout;
class LayoutProcessorPlugin
{
    public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    )
    {
        $cityField = [
            'component' => 'Vendor_ModuleName/js/shippingAutoComplete',
            'config' => [
                'customScope' => 'shippingAddress',
                'template' => 'ui/form/field',
                'elementTmpl' => 'Vendor_ModuleName/autocomplete/shippingAddress/cityInput',
                'id' => 'city',
                'tooltip' => [
                    'description' => 'Select a City.',
                ],
            ],
            'dataScope' => 'shippingAddress.city',
            'label' => 'City',
            'provider' => 'checkoutProvider',
            'sortOrder' => 53,
            'validation' => [
                'required-entry' => true
            ],
            'options' => [],
            'visible' => true,
        ];

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
        ['shippingAddress']['children']['shipping-address-fieldset']['children']['city'] = $cityField;

        return $jsLayout;
    }
}

app/code/Vendor/ModuleName/view/frontend/web/js/shippingAutoComplete.js

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

    ko.bindingHandlers.shippingAutoComplete = {
        init: function (element,valueAccessor) {
            var settings = valueAccessor();
            var selectedOption = settings.selected;
            var options = settings.options;
            var updateElementValueWithLabel = function (event, ui) {
                event.preventDefault();
                $(element).val(ui.item.label);
                if(typeof ui.item !== "undefined") {
                    selectedOption(ui.item);
                }
            };

            $(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('list/check/cities/'),
                data: JSON.stringify({
                    q: request.term
                }),
                contentType: "application/json",
                type: "POST",
                dataType: 'json',
                error : function () {
                    alert("An error have occurred.");
                },
                success : function (data) {
                    //Data is a string of the form: '[{"label": label, "value": value}]'
                    response( data );
                }
            });
        }
    });
});

app/code/Vendor/ModuleName/view/frontend/web/template/autocomplete/shippingAddress/cityInput.html

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