Form autocomplete with jQuery

Form autocomplete with jQuery

by CHRISTIAN BAYER -
Number of replies: 3

Hi,

I'm developing a course block that has an autocomplete input with the users of the current course (fixed data, not ajax loaded). Until here, everything works fine, but I need to update the selected value of the autocomplete with jQuery when the user perform some actions on the screen. When I change the selected value of the select (like jQuery('#myautocomplete option[value="targetvalue"]').attr('selected', true)), the autocomplete does not update itself and the chip is not updated until I manually select another option and then, two chips are created. 

So, my question is: how can I update the autocomplete input and make the chips appear using jQuery to update the selected value?

Obs: I've already read the docs, but it did not help.

Average of ratings: -
In reply to CHRISTIAN BAYER

Re: Form autocomplete with jQuery

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

Does this work...

$('#myautocomplete').val('targetvalue');


In reply to Justin Hunt

Re: Form autocomplete with jQuery

by CHRISTIAN BAYER -

Hello,

thanks for the sugestion, but it does not work either. Just to be sure and explain it a little more, here goes an example of what I need:

User autocomplete

the autocomplete select have some data (for example, "Admin User" with [value="2"]. With jQuery, I need to set it as selected, not clicking on it as it is shown. This is the select generated code:

autocomplete select html code

As I described previously, only setting the option as selected or setting it's value as sugested, does not work. It does not update the element on the screen, that is not an actual <select>. And what I need is this:

autocomplete chip selected

But the badge only appears when a <li> option of the autocomplete is clicked. I'll try tomorrow some more things that I thought and update this post in case that any of them works.

In reply to CHRISTIAN BAYER

Re: Form autocomplete with jQuery

by Justin Hunt -
Picture of Particularly helpful Moodlers Picture of Plugin developers

OK. Let me suggest what I have done in similar situations, but without actually testing in a select situation.

I use:

 $('#thing_that_needs_clicking').trigger('click');

Not sure how well that can be applied here.  But maybe it helps...