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!

9
  • you need to use jQuery(element).autocomplete... in setSearchElement instead of jQuery('#tags')
    – Max
    Jan 7, 2017 at 16:25
  • It does not make any difference the error stays. Jan 7, 2017 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, 2017 at 16:37
  • Please explain me more exactly what steps i must to do. Jan 7, 2017 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, 2017 at 9:41

1 Answer 1

4

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 and acknowledge that you have read and understand our privacy policy and code of conduct.

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