Autocomplete form field using Knockout Js on Magento2 Checkout

Question

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} }"

enter image description here

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
}"/>

Answer 1

This thread helped me to resolve the issue

Magento 2 & JQuery.UI.Autocomplete

the small issue needs to be corrected here

require-config.js to requirejs-config.js

• Kamlesh Solanki: Can you please provide your requirejs-config code?
• Ronak Rathod: please attach js file
• Syed Saleem: var config = { config: { mixins: { 'mage/menu': { 'Iqraread_EasyCheckout/js/lib/mage/menu-mixin': true } } } }; @KamleshSolanki