3

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

  • share your code in layout file, where you can add this to checkout. – Dhiren Vasoya Dec 31 '16 at 3:22
  • I have updated my question. – user3748173 Dec 31 '16 at 11:06
7
+50

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

0

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
      });
   });
...
  • It does not make any difference if I use $ or jQuery. I have checked with Chrome console the js file content (if changes has taken place in it). – user3748173 Jan 2 '17 at 11:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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