Not trigerring railsAutocomplete.select

[rafaeelaudibert]

Hey, I have the following snippet of code, and I'm trying to catch your event when I select something on my Rails website, but it doesn't catch the event, just like if it is not being fired

<%= autocomplete_field_tag :support_search, params[:search], autocomplete_support_users_path, class: "form-control search-query", placeholder: "Adicionar Suporte Adicional" %>
<div class="input-group-append">
    <button id='button-add-support' class="btn btn-primary btn-outline-secondary hidden" onclick="toggleSupport()" type="button"><em class="fa fa-check"></em></button>
 </div>

And this is my JS trying to catch the event

$('#support_search').keyup(e => {
    $('#button-add-support').hide(80);
})
$('#support_search').on('railsAutocomplete.select', () => {
    $('#button-add-support').show(80);
})   

The event is not fired, so it can't be retrieved and I don't understand why

[joshkestenberg]

Seconded, and I'm actually having a really hard time even finding a workaround. @rafaeelaudibert did you come up with a solution?

[rafaeelaudibert]

I checked a click on the .ui-menu class, just like the following:

$('.ui-menu').click(e => {
   $(`#button-add-support`).show(80);
 });

It is almost the same, but it would be really beter if we had the proper event working

[joshkestenberg]

good lord.. this is exactly what i'm trying to do and I can't understand why it's not working.

$(document).click(function(e) {
    console.log($(e.target))
})

$('.ui-menu-item-wrapper').click(function(){
    console.log('click');
})

the first function returns the expected jquery object ('.ui-menu-item-wrapper'), but i can't get the second function to fire.. i've also tried '.ui-menu', '.ui-menu-item', and '.ui-menu-item-wrapper'. dyou see any glaring errors in my code?

Even $('.ui-menu-item-wrapper').trigger('click') doesn't trigger that event handler.

Thanks for responding.

[joshkestenberg]

For posterity:

I realise now that I was attempting to bind a function to an element that didn't yet exist. '.ui-menu' only appears once its corresponding input is focused.

Thus, this was the solution I came up with.

                $('[autocomplete-input]').focus(function(){
			$('.ui-menu').click(function(e){
			   var selected = $(e.target).text()
			})
		});

Here, we only bind the event handler once we're sure the target element exists.

[rafaeelaudibert]

Yes, you are totally right. Now looking to my code, I wrap that call on a call to the autocomplete-input click event, so that I can add it just when it is created

[jasonhazel]

For anyone stuck trying to get this to work, I just skipped using the gem helpers and used jQueryUI directly. Maybe not the best solution for every case, but luckily worked in mine.

Instead of using autocomplete_field, just use a vanilla text_field

<%= f.text_field :attribute, id: 'attribute-autocomplete %>

$('#attribute-autocomplete').autocomplete({
  source: "<%= autocomplete_attribute_path %>",
  select: function(e, ui) {
    console.log(ui.item.value)
  }
})