Setting Google Places 'Types' on Dropdown Input

Question

I'm using the Google Places API to list pick up and drop off locations for a transportation service. We have two fields that, when typed in, autosuggest results.

When a a dropdown, #transport-type, is set to the first option, value = 1, then the input field, #pick-up-location, should have 'types' airport added to its results.

JS:

function transport_types() {
 if ($('#transport-type').val() == 1) { 
     var input = document.getElementById('pick-up-location');
     var options = { types: ['airport'] };
     autocomplete = new google.maps.places.Autocomplete(input, options);
 }
 if ($('#transport-type').val() == 2) {
     var input = document.getElementById('drop-off-location');
     var options = { types: ['airport'] };
     autocomplete = new google.maps.places.Autocomplete(input, options);
 }
 google.maps.event.addDomListener(window, 'load', initialize);
}

Dropdown HTML:

<select id="transport-type" name="TransNeeded" required="true" tabindex="101" onChange="transport_types();">
  <option value='0' selected='selected'>Where do you want to go?</option>
  <option value='1' onfocus="enableGoogle('', true);"  id="pick-up-type">Pick-Up Location is an Airport</option>
  <option value='2' onfocus="enableGoogle('', true);" id="drop-off-type">Drop-Off Location is an Airport</option>
  <option value='3' onfocus="enableGoogle('', true);" id="point-point-type">Point to Point or Charter</option>
</select>    

Input HTML:

<input type="text" id="pick-up-location" name="PUFullAddress" tabindex="104" value="Pick-Up Location" required="true" 
  onblur="if(this.value.length==0) { $('#pick-up-location').attr('value', ''); }"
  onkeypress="delay(50);" 
  onfocus="enableGoogle('PU', false);" 
/>

<input id="drop-off-location" name="DOFullAddress" type="text" tabindex="105" value="Drop-Off Location" required="true" 
 onblur="if(this.value.length==0) { $('#drop-off-location').attr('value', ' '); }"
 onkeypress="delay(50);" 
 onfocus="enableGoogle('DO', false);" 
/>

I'm not the most seasoned jQuery programmer, so it could even be an issue of syntax. I appreciate any insight you guys can provide.

Thanks for your time!

Isobelisocheim

I've never used google places api but for your javascript syntax: The second line down says if #transport-type equals 1, that's correct, but then The third line down says set #transport-type to 1 and is missing semi-colon ; at the end. i would get rid of that line, same for the 8th line. – Nawrocki

Removed lines 3 and 8 and updated above. Still loads with dropdown expanded, and no selection closes. Also added the HTML for the dropdown to make sure I'm not overlooking something else silly. – Isobelisocheim

Now i understand what yppu're trying to do, i think :) Have a look at this as a rough guide fiddle.jshell.net/G7cnn/3 – Nawrocki

MUCH simpler than what I was doing! Although when I add the function the form breaks again. Thanks so much @MarkPrice for your help. Please let me know if you have any ideas, I'll be playing with it. – Isobelisocheim

Answer 1

You're missing a close bracket and have an extra ; Try the following

 if ($('#transport-type').attr('value', '1')) {

Nawrocki

Added the bracket, and still breaking. Edited first post code to where I'm at. Thanks Mark! – Isobelisocheim

remove the ; after the close bracket – Nawrocki

Removed ; after close bracket, and an extra } after the listener. Doesn't look broken now, but type isn't changed for the autosuggest. Edited first post to reflect. – Isobelisocheim

The only error is: 'Uncaught TypeError: Illegal invocation'; which could be unrelated. The autosuggest appears now without breaking, but doesn't restrict types to airport. Thanks again Mark! – Isobelisocheim

Can you try this: if ($('#transport-type').val() == 1) { I believe $('#transport-type').attr('value', '1') is setting the value to 1 – Nawrocki

I had forgotten to add the function to the dropdown onChange. Since doing so, the dropdown loads expanded and selecting an option doesn't close it. Expanded on the function to work for two drop down options, with Mark's update in original post. – Isobelisocheim