jQuery-ui autocomplete: Cannot read property 'element' of undefined

Question

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!

Answer 1

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