0

I am trying to add autocomplete input field below checkout shipping-method. But it is not working. When i look at chrome console i see those errors.

Error messages:

knockout.js:3012 Uncaught TypeError: Unable to process binding "afterRender: function (){return setSearchElement }" 
Message: Cannot read property 'element' of undefined
at $.(anonymous function).(anonymous function)._create (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:6829:22)
at $.(anonymous function).(anonymous function)._create (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:402:25)
at $.(anonymous function).(anonymous function)._createWidget (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:561:8)
at new $.(anonymous function).(anonymous function) (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:363:9)
at HTMLInputElement.<anonymous> (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:508:30)
at Function.each (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery.js:384:23)
at jQuery.fn.init.each (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery.js:137:17)
at jQuery.fn.init.$.fn.(anonymous function) [as autocomplete] (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:503:9)
at UiClass.setSearchElement (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/Vendor_checkoutShipping/js/view/checkout/shipping/additional-block.js:14:29)
at init (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/Magento_Ui/js/lib/knockout/bindings/after-render.js:20:26)

And when i click to input field or type

Uncaught TypeError: Cannot read property 'element' of undefined
at $.(anonymous function).(anonymous function)._close (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:7080:17)
at $.(anonymous function).(anonymous function)._close (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:402:25)
at $.(anonymous function).(anonymous function).close (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:7076:8)
at $.(anonymous function).(anonymous function).close (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:402:25)
at $.(anonymous function).(anonymous function).blur (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:6813:10)
at HTMLInputElement.handlerProxy (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery/jquery-ui.js:703:7)
at HTMLInputElement.dispatch (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery.js:4624:9)
at HTMLInputElement.elemData.handle (https://127.0.0.1:8446/pub/static/frontend/Magento/luma/et_EE/jquery.js:4292:28)

I have searched for an answer and found this, but it seems to be unrelated to current errors?

My files:

checkout_index_index.xml

...
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
    <item name="shippingAdditional" xsi:type="array">
        <item name="component" xsi:type="string">uiComponent</item>
        <item name="displayArea" xsi:type="string">shippingAdditional</item>
        <item name="children" xsi:type="array">
            <item name="additional_block" xsi:type="array">
                <item name="component" xsi:type="string">Vendor_checkoutShipping/js/view/checkout/shipping/additional-block</item>
                <item name="template" xsi:type="string">Vendor_checkoutShipping/checkout/shipping/additional-block</item>
            </item>
        </item>
    </item>
</item>

additional-block.js

define(['uiComponent'], function (Component) {
'use strict';
var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp"
];
return Component.extend({
    setSearchElement: function (element) {
        jQuery(element).autocomplete({
            source: availableTags,
            minLength: 2
        });
    }
});
});

additional-block.hmtl

<div>
    <div >ADDRESSES</div>
    <div class="addresses red ui-widget">
        <label for="tags">Tags: </label>
        <input  id="tags" class="inputAddresses" data-bind="afterRender: setSearchElement">
    </div>
</div>


I have asked this before, but the answers i got did not solve those errors. I have messed with it quite some time trying different ways to solve it but nothing changes the output error. I have: cleared chrome cache, deleted pub/static directory and run setup:upgrade. Also no other module is installed to test environment. It makes no difference if i use id or element in jQuery('#tags').autocomplete(..) except that with elements Magento adds autocomplete="off" to input. What could cause these errors??

Versions:

Magento 2 uses jQuery-ui version: "1.10.4" and Magento version 2.1.2.

UPDATE

I have found out that the element mentioned in those error messages is this:

<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-29" tabindex="0" style="display: none;"></ul>

But i have still not closer to the solution (Why this error is happening? - I think that something is wrong with knockoutJs might it be view model some how ...?)? I have no idea what should i do next!

  • you need to use jQuery(element).autocomplete... in setSearchElement instead of jQuery('#tags') – Max Jan 7 '17 at 16:25
  • It does not make any difference the error stays. – user3748173 Jan 7 '17 at 16:34
  • try to temporarily remove afterRender binding and initialize jQuery autocomplete widget from browser console after full loading of your block. – Max Jan 7 '17 at 16:37
  • Please explain me more exactly what steps i must to do. – user3748173 Jan 7 '17 at 19:21
  • 1. after page loading you made sure that the input adresses element is present on page. 2. open browser console (F12) 3. run jQuery('#tags').autocomplete({ source: ['tag'], minLength: 2 }); in console. 4. Try to test autocomplete – Max Jan 8 '17 at 9:41
3

There is issue with Magento2 autocomplete in consequence of extending of base jquery-ui widget by Magento application.

More details by link: Magento 2 & JQuery.UI.Autocomplete

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.