Autocomplete JavaScript

isnt there a nicer way to inject css and script into the view? e.g. instead of MANUALLY injecting, isnt there a way to put the dependencies somewhere else? because if you have 15 dependencies in a view, this can become ugly quickly. In laravel there is the @once notation that can be used potentially. As well components in general

Hey Bippo,

You can use Twig inheritance, in a base template you add a CSS and Script block with all of your dependencies, and then, any template that requires them can just inherit from that template. Or, you can create a twig file including the deps, and add it to your template by using the include function

Cheers!

Hi !
Is there a way to attach autocomplete.js globally for all the text inputs of a page (with a class for example) even when they are created by JS after the page is loaded? If possible, I don't want to call an init fonction each time an input is created but make a sort of global listener. Help would be appreciated!

Hey Cyril S.!

I think we could make that happen :). In fact, our setup already almost makes this possible.

1) Give every input that you want 4 things:

A) a generic class - like js-autocomplete.
B) a data-autocomplete-url attribute, like we do already - https://symfonycasts.com/screencast/symfony-forms/autocomplete-ajax#adding-a-data-autocomplete-url-attribute
C) a data-key attribute, which is set to the "key" on the AJAX call that you want to use - it will the hardcoded .users code here https://symfonycasts.com/screencast/symfony-forms/autocomplete-ajax#codeblock-b3f8faa454
D) A data-display-key, which will replace the hardcoded displayKey: 'email' here: https://symfonycasts.com/screencast/symfony-forms/autocomplete-ajax#codeblock-b3f8faa454

2) Then the JavaScript will just need some minor updates:

$(document).ready(function() {
    $('.js-user-autocomplete').each(function() {
        var autocompleteUrl = $(this).data('autocomplete-url');
        $(this).autocomplete({hint: false}, [
            {
                source: function(query, cb) {
                    $.ajax({
                        url: autocompleteUrl+'?query='+query
                    }).then(function(data) {
                        cb(data[$(this).data('key')]);
                    });
                },
                displayKey: $(this).data('display-key'),
                debounce: 500 // only request every 1/2 second
            }
        ])
    });
});

I may have missed something, but I think that should do it! Let me know!

Cheers!

Finally, I decided to use the old fashion way: to call the init autocomplete method on each new created input. Maybe is there a better way with a sort of global listener but, at least, it works. Thanks for your help.

Thanks for your answer. Your code is exactly what I already had and it works perfectly with all the inputs loaded with the page. But it fails with inputs added by javascript later, as the listener doesn't listen them :-(
I wanted to make a global listener on document but I don't know which event to listen...

Hey Cyril S.!

Ah, yes, the classic problem of attaching behavior to a DOM element after it's added to the page :). Basically, you will need to do this:

Isolate all of the code inside the document(ready) into a function. Then, each time you add an element to the page, you call that function again, which will reinitialize the elements. You may also need to track which elements have already been initialized by setting some data key on the element (e.g. $(this).data('_autocomplete_initialized')) and then skipping elements with that data.

There is another solution - called a "delegate selector" https://symfonycasts.com/screencast/javascript/delegate-selectors-ftw - that almost works... but it won't in this case. You really do need to call .autocomplete() manually each time a new element is added.

If you have any questions about the proposed solution, let me know!

Cheers!

Aahh! Set in webpack
<br />import 'autocomplete.js/dist/autocomplete.jquery.min'<br />// import 'autocomplete.js' $(...).autocomplete is not a function<br />
I did not immediately understand the reason. But my code does not want to work. Night, 2:38 =(

Maybe it helps someone in future:
in app.js
import 'autocomplete.js/dist/autocomplete.jquery';
not
import 'autocomplete.js';

Uncaught Error: Cannot find module 'autocomplete.js/dist/autocomplete.jquery'

Hey Irina,

Thank you for this tip!

Cheers!

Hey Ozornick

I believe you are hitting a known issue related to old jQuery plugins and Encore. In this chapter Ryan explains what's the problem and how to fix it https://symfonycasts.com/sc...

Cheers!

Hello,

i tried the sample, to show "foo" and "bar" but the javascript doesn't work and the previous user-entries appeared.
Script-tags seems to be okay. The assignment of the class also is correct.

Also checked for typos.
Is there possibly a general error I could have?
thanks in advance
peter

Hey @Peter!

Hmm. The fact that the previous user-entries appeared definitely makes me think that the JavaScript simply isn't taking effect for some reason. Do you have any JavaScript errors? The other thing I like to check when JavaScript silently doesn't work, is to make sure I'm selecting the element correctly. In this case, in algolia-autocomplete.js, between the first line (document ready) and the 2nd line (the .autocomplete() line), add this:

console.log($('.js-user-autocomplete').length);

If this says 0... then for some reason, your element is not being found on the page. If it is 1, then... well... the problem is somewhere else ;).

Let me know!

Cheers!

jumping in here just in case this helps anyone else, i got a console.log return value of 2 (would be more if my form had more than 1 field) turns out was applying the class to both the entire form and the field inside it. Fixed my issue by moving this part of code

`
'attr' => [

            'class' => 'js-user-autocomplete'
        ]

`
up to the field in builder->add (DON'T SET IN RESOLVER OPTIONS)
Console.log now returns 1 and it is only applied to the field needed and the autocomplete works like a charm!

Perhaps something has changed in the way Forms interact with this js plugin in symfony 5?
Anyway, investigate it is not a CSS class issue like mine was.. spent too long investigating javascript when it was all working well..

Hey jacobbullock95!

Thanks for posting! It's always nice to see other people's solutions to problems in case it helps others :).

Perhaps something has changed in the way Forms interact with this js plugin in symfony 5?

It is possible, but I'm not aware of anything. The important piece in this video is that we're creating a custom field ( UserSelectTextType) and adding the attr option to its configureOptions() method. We're not adding it in the main form class anywhere - e.g. ArticleFormType. This allows us (in ArticleFormType) to add the UserSelectTextType and not have to also pass the "attr" option - it's already the "default" value thanks to the attr option we've added to UserSelectTextType. If you did add the attr option to the configureOptions() method of ArticleFormType, it would definitely add it to the form tag. So, just put it on UserSelectTextType and nowhere else. Or, it's just as valid to NOT put it on that class, and only put it in the builder->add() section like you did.

I'm not sure if that will clear anything up for you, but hopefully it will explain what might be going on :).

Cheers!

Hi, Ryan,

Thanks for the quick answer.

I found the "error" and it was really a "general error".
NoScript was active and blocked cdn.jsdelivr.net.
A stupid mistake on my part.
I'll add a script blocker check.

But on this occasion: the courses are great!

Best regards

Peter

Sweet! Nice debugging! Now keep going! ;)

In my case, I have the same problem. But, I have neither 0 neither 1 when refreshing the page for:
console.log($('.js-user-autocomplete').length);
How can I solve this please?

I found my mistake. Finally, it is just a misspelling: I wrote

{% block javascript %} instead of

{% block javascript %}

Sorry, instead of {% block javascripts %}<br /> with a "s".

Hey Stephansav,

Ah, tricky misprint, difficult to notice! Glad you nailed it! And thank you for your feedback that you got it working.

Cheers!