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!
jQuery(element).autocomplete...
insetSearchElement
instead ofjQuery('#tags')
jQuery('#tags').autocomplete({ source: ['tag'], minLength: 2 });
in console. 4. Try to test autocomplete