Block with jQuery autocomplete in checkout page

Question

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."

Answer 1

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:

Answer 2

Replace the $ with jQuery in your added script and try again

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