0

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

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
  • Can you please provide your requirejs-config code? – Kamlesh Solanki Jul 3 at 14:39
  • please attach js file – Rk Rathod Jul 4 at 15:11
  • var config = { config: { mixins: { 'mage/menu': { 'Iqraread_EasyCheckout/js/lib/mage/menu-mixin': true } } } }; @KamleshSolanki – Syed Saleem Jul 6 at 2:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.