Magento 2 – Add jQuery Autocomplete to Checkout Page

autocompletecheckoutfrontendjquerymagento2

How can I add jQuery autocomplete to checkout custom block?

Part of my js file code:

 if (...) {
   $(".hello").not(".red").hide();
   $(".red").show();
   var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp"];
   $(".hello").click(function () {
      $(".hello").autocomplete({
        source: availableTags
      });
   });
...

"I have removed the error message, because the answers I accepted is not solution to it."

Best Answer

Checkout one page application use knockout for rendering and binding. If you need to work with DOM elements (like via jquery ui library) you should use afterRender knockout binding.

Example:

my-template.html:

<input data-bind="afterRender: setSearchElement" />

my-component.js:

define([
    'uiComponent'
], function (Component) {
    'use strict';

    return Component.extend({
        setSearchElement: function (element) {
            var availableTags = [
                "ActionScript",
                "AppleScript",
                "Asp"
            ];
            $(element).autocomplete({
                source: availableTags
            });
        }
    });
});

checkout_index_index.xml

<item name="my-component" xsi:type="array">
    <item name="component" xsi:type="string">path-to-js/my-component</item>
    <item name="template" xsi:type="string">path-to-template/my-template</item>
</item>

Result:

Result

Related Topic