Using the autocomplete-controller

Yo @Ryan-L!

Hmm. That message from your editor MAY just be a warning that you can ignore: it looks like it's trying to get some metadata about the "type" behind stimulus-autocomplete and it's ok if it can't find anything.

In your brower's console, do you see any messages about the autocomplete controller being "initialized" or "connecting"? That'd be the first thing I'd check: we need to make sure that Stimulus is seeing your data-controller="autocomplete" element AND your autocomplete controller and initializing the controller.

Cheers!

Hey Peter L.!

Ah, thanks for the tip! So, if I understand it, you *should* still have the role="option"... but it's not quite as catastrophic if you forget it :).

Cheers!

Hey chessserver!

Excellent question! The PHP side of things would basically be the same... you would mainly just be "converting" the JavaScript from that tutorial into a Stimulus controller, which should feel very nice actually :).

Here are a few pointers:

A) Instead of adding a js-user-autocomplete class to the form element, you would add a data-controller="autocomplete" attribute (assuming you call your controller "autocomplete": https://symfonycasts.com/screencast/symfony-forms/autocomplete-js#codeblock-d8e290f178

B) Similar to the above, you would pass the URL in as a "value" to the controller. So, assuming your controller name is "autocomplete" and you create a value called url, you would set a data-autocomplete-url-value.

With (A) and (B), when your field renders, it will contain the needed attributes to activate an "autocomplete" Stimulus controller and pass the url into it as a "url" value. The last step would be to:

C) Convert the JavaScript into a Stimulus controller. It would look something like this:

// assets/controllers/slideshow-controller.js

import { Controller } from "@hotwired/stimulus"
import $ from 'jquery';

export default class extends Controller {
    static values = { url: String }

    connect() {
        const url = this.urlValue;

        $(this.element).autocomplete({hint: false}, [
            {
                source: function(query, cb) {
                    $.ajax({
                        url: url+'?query='+query
                    }).then(function(data) {
                        cb(data.users);
                    });
                },
                displayKey: 'email',
                debounce: 500
            }
        ])
    }
}

That should be it :). This uses connect to initialize the autocomplete functionality. We reference the input via this.element... and we grab the URL from this.urlValue. This, like all things with Stimulus, has the advantage over the code in that tutorial that even if you loaded a form via Ajax, this behavior would correctly be initialized.

Let me know if this helps!

Cheers!

@Ryan, thanks for your answer! This works with the original setup. However, I have been a bit unspecific. I would like to replace the above autocomplete mechanism with the stimulus-autocomplete controller introduced in this lesson.

I am struggling to setup the div_layout for the new widget correctly. The base structure should be similar to the from in product/index.html.twig. But how to transfer the url and the searchTerm correctly? Is a wrapper around the presented controller required, replacing the .autocomplete in your example above? How would the whole block starting with $(this.element) look like?

I want to implement some other 3rd-party stimulus-controllers as well, so this would help me to progress. Unfortunately, my JS Knowledge is limited.

Hey chessserver!

Apologies for my slow reply! Ok, let me give you some pointers (which are hopefully helpful!) and then you can tell me what else might be unclear (I usually reply faster than this time!).

I am struggling to setup the div_layout for the new widget correctly

Ok, on a high level, here is how this will probably work:

A) In your form field template, you will need one element that is around everything - e.g. a div - and this will have {{ stimulus_controller() }} rendered onto it.

B) How to pass the URL? You can pass the "url" to stimulus_controller as a value (i.e. the 2nd argument to the controller). You could hardcode this - e.g. url: path('some_route') or you could pass the URL into the template as a Twig variable. You would do this by (A) creating a custom "field option" on your new field - e.g. url - and then (B) in buildView() of your custom field, you read that option and set a custom "variable" called "url". We do something similar here: https://symfonycasts.com/screencast/symfony-forms/build-view#codeblock-8c63ee1cf8. You could read the "url" from $options and then create a new $view->vars['url'] = $options['url'];. Then, in 2nd arg of stimulus_controller, you would have { url: url }

C) With this setup, your stimulus_controller is on an element around the input, but not actually on the input. That's ok! You could set a "target" on the input - using stimulus_target - and then use that in the controller. Or, as a shortcut, because you will only have one input element inside your controller, you could just look for that. So you would have something like:

// assets/controllers/autocomplete-input-controller.js

import { Controller } from "@hotwired/stimulus"
import $ from 'jquery';

export default class extends Controller {
    static values = { url: String }

    connect() {
        const url = this.urlValue;

        $(this.element).find('input').autocomplete({hint: false}, [
            {
                source: function(query, cb) {
                    $.ajax({
                        url: url+'?query='+query
                    }).then(function(data) {
                        cb(data.users);
                    });
                },
                displayKey: 'email',
                debounce: 500
            }
        ])
    }
}

The only change was looking for the "input" element from within this.element.

I think there are still other moving pieces... but let me know if this helps :).

Cheers!

Hey Eugem!

Hmm. I think that's a case-by-case basis. The stimulus-use library (not exactly controllers) are super high quality. https://stimulus-components... also look high quality. The controller in this chapter is... works really well... but it is *not* the highest quality. It lacks tests mostly, which I would expect any high quality library to have.

So, it's like PHP libraries or bundles - it varies widely. There are definitely both types out there.

Cheers!

Hey elkuku

That's odd, it makes me wonder if there's some bug on Symfony UX or Stimulus itself. Did you register the Clipboard module after importing it?
app.register('clipboard', Clipboard);

Hey vLoght!

That's an excellent question that I completely forgot to address :). Yes, it does debouncing by default - 300ms - but it's not configurable (this library works super well, but it's dead-simple).

Cheers!

Hey palaciospoa

IIRC this course IS using stimulus-bridge version 2.1.0 so what exact issue will fix your recomendation?

Cheers!

Just to mention that people that have this course since it was launched, have to look into their package dependencies.

I have the trouble of not having the feature of laziness via query parameter. BTW it is awesome great work 👍

Great! Thanks for your tip! BTW it's always better to download new code from course page that will help to avoid such issues!

Cheers!

Hey Gareth,

I personally didn't use SmartWizard jQuery plugin, but did you try to add ".autoProvidejQuery()" to your Webpack Encore config? See this page for more details:
https://symfonycasts.com/sc...

Please, don't forget to restart your webpack encore after this change! :) Does it help you?

Cheers!

Thanks for help Victor, but effect it's that same. Console return error like above and before restarted webpack encore. Even I tried this code added to webpack, but still nothing.

    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    })

Datatables works in a similar way and there is no problem with reading jQuery, but I had to add code to webpack.config.js

config.module.rules.unshift({
  parser: {
    amd: false,
  },
});

Could you add a smartWizard to your project and try to run it? If you have no problems, there may be something wrong with my webpack settings, or some additional library is missing.

Hey Wru M.!

I don't know that library, but here's my guess (this is from looking at their source code too). It seems like the usage is supposed to be:

import $ from 'jquery';

/* it looks like, when you import smartwizard, it returns a function */
import smartWizardFactory from 'smartwizard';

/* you can then call this function and pass it jQuery */
/* the result is that, I believe, it will modify the $ variable so that */
/* it has the smartWizard() method on it (e.g. $('#foo').smartWizard()); ) */

smartWizardFactory($);

This is a bit of a guess... but if I'm wrong you could do some debugging. This is the part of the code that should be executing when you import the "smartwizard" module - https://github.com/techlab/jquery-smartwizard/blob/21681e8aea67376d2d3743b4a27b7ecdc49babaf/dist/js/jquery.smartWizard.js#L26-L42 - that file would live at node_modules/smartwizard/dist/js/jquery.smartWizard.js in your project, and you could be some console.log() there to learn more.

Good luck!