3

I have been knocking my head to the walls today trying to get the field result from jQuery Geocomplete to display street_address but it looks the plugin is not rendering it as a data-geo="" onto my form field or anything else!.

Bellow on my HTML i have the fields to pick up the street name and another for number i need the result from both to go to #BillingAddress. I believe some JavaScript may do the work but I am not an expert on it.

<div class="item">
<input id="autocomplete" placeholder="Look up your address" type="text"></input>
</div>
<div class="item" style="display: none;">
<input class="cat_textbox" id="houseNo" data-geo="street_number" type="text" placeholder="House Number" maxlength="50"/>
</div>
<div class="item" style="display: none;">
<input class="cat_textbox" id="street" data-geo="route" type="text" placeholder="street" maxlength="50"/>
</div>
<div class="item">
<input class="cat_textbox" id="BillingAddress" data-geo="street_address" type="text" placeholder="Billing Address" maxlength="50" name="BillingAddress"/>
</div>

So far I have tried using some jquery to trnasfer the fields values to the #BillingAddress input but it only copies if the other inputs are keyed or pressed, clicked, but I want them to keep hidden to improve visibility and make the form less complex for some people, so when the Geo results is chosen they populate into this field together.

$('#houseNo').on('propertychange change click keyup input paste',function(){
   $('#BillingAddress').val(this.value+' '+$('#street').val());
});

$('#street').on('propertychange change click keyup input paste', function(){
   $('#BillingAddress').val($('#houseNo').val()+' '+this.value);
});

Much appreciated the help and i think this is also a good query for some others out there.

HERE IS THE FIDDLE

John Slegers
  • 45,213
  • 22
  • 199
  • 169
Ricardo Alves
  • 561
  • 1
  • 5
  • 21

2 Answers2

2

fillDetails: function(result){ "result" object doesn't have "street_address" in "address_components", it is set as a separate property of result - "name". If you just typed in search term and submitted, "name" is being returned. If you click "find" again, "name" is not being returned.

I made a quick "fix" to replace "street_address", on line 338 I added following:

    street_addr: result.formatted_address.split(',')[0],

So lines 335-339 look like this:

  // Add infos about the address and geometry.
  $.extend(data, {
    formatted_address: result.formatted_address,
    street_addr: result.formatted_address.split(',')[0],
    location_type: geometry.location_type || "PLACES",

And added "street_addr" on line 65:

"formatted_address street_addr location_type bounds").split(" ");
Ricardo Alves
  • 561
  • 1
  • 5
  • 21
1

As you probably already know, modifying the plugin isn't a great thing to do. There's a simpler way to join elements of the results object. Just bind to the result.

$('#geocomplete').geocomplete({
  details: '#geo_details',
  detailsAttribute: 'data-geo',
  types: ['geocode', 'establishment']
}).bind("geocode:result", function(e, r) {
  return $('[data-geo=street_address]').val(r['address_components'][0]['short_name'] + ' ' + r['address_components'][1]['short_name']);
});
Archonic
  • 5,207
  • 5
  • 39
  • 55
  • It's also a good way I must say but I did changed the plug in to avoid what you are doing, every time someone get the plugin they would have to add a few more lines to bind functionality properly but I can say it's all about preference you choose to use it the way you intend it as long as it works! I didn't test yours but I'll keep it record to try on another project. – Ricardo Alves Aug 04 '15 at 07:35
  • 1
    I have searched for hours how to fix this horrible issue haha. I ended up using your solution and I can undoubtedly say that it works flawlessly. You sir, deserve a cookie. But I can't give you a cookie, so I will simply upvote your answer. – Christopher Richa Sep 18 '15 at 15:52