Ruby on rails, jquery. Geocoder searching

Question

I have a search box and a geocoded model. I trying to use jquery to automatically search after entering an address. So far, pressing the enter key works and searches the first item in the list (google autocomplete list), but I'm struggling to search after selecting an autocomplete list item with mouse click.

<div class="search-form-cont">
  <%= f.search_field :date_gteq, value: Date.today, :format => :short, placeholder: t('gig.from') %>
  <%= f.search_field :date_lteq %>
  <%= f.submit class: 'gig-s-btn' %> placeholder: t('gig.until') %>
  <%= text_field_tag :search, params[:search], class: 'loc-search' %>
  <%= f.collection_select :genres_id_in, Genre.order(:id), :id, :name, {},:data => {}, :multiple => true %>
  <%= f.submit class: 'gig-s-btn' %>
  <input type="button" id="clearsearch" value="clear" />

Hitting enter works;

$('.loc-search').keypress(function(e) {
    var key = e.which;
    if(key == 13)  // the enter key code
    {
      $(".gig-s-btn").click()
    }
  });

But mouse clicks don't, nothing happens;

$('.pac-item').mousedown(function() {
      $(".gig-s-btn").click()
    });

I'm very new to query and really struggling with this. I have tried a ton of other things but none work in the desired way.

EDIT:

As .pac-item is dynamically created content, I have tried;

$(document).on('click', '.pac-item', function(){
      $(".gig-s-btn").submit();
    });

Which doesn't work either.

EDIT 2:

This submit the form on mouse click but doesn't work very well.

$('body').on( "mouseup", '.pac-item', function(){
      $(".gig-s-btn").closest('form').submit()
    });

If I were to type 'New' and 'New York' appears in the list, clicking 'New York' would submit the form but with search query 'New' only, leaving no, or undersired results.

EDIT 3:

This is working for me:

$('body').on( 'mousedown', '.pac-item', function(){
     setTimeout(function() {
      $(".gig-s-btn").closest('form').submit()
    }, 1);
   });

The mouseup event doesn't work as the container disappears on mousedown, so I used mousedown and set a delay of 1 millisecond to allow the form to populate before firing the search.

what are you using for doing the autocomplete? google.maps.places.Autocomplete I presume? the documentation and code samples https://developers.google.com/places/javascript/ are pretty complete and just work — Michael Milewski

Michael Milewski Michael Milewski · Accepted Answer · 2016-02-11T11:41:19

don't try to .click() the gig-s-btn element, just .submit() the form so change to

    $('.pac-item').mousedown(function() {
      $(".gig-s-btn").closeset('form').submit();
    });

I have put a quick snippet on JSFiddle (although the form errors on submit) if you click the divs that are the drop down text the form will be submitted. https://jsfiddle.net/saramic/7szkg8x7/

Ruby on rails, jquery. Geocoder searching

2 Answers