Question 1. When using Google Places autocomplete API, how do I show only the city name after user selects one of the suggestions? For example,

When user types: New...., the suggestions shown are -

New Delhi, India

New York, USA etc.

When user selects the first option; I'd like the input field to show only 'New Delhi' and NOT 'New Delhi, India'?

Question 2: 

I pretty much accomplished the above using geocomplete api:  https://github.com/ubilabs/geocomplete/blob/master/jquery.geocomplete.js

The key here is to use details and detailsAttribute options; where detailsAttribute option tells which field to populate and with what. 

Here's how I do it: 

My HTML:

<input type="text" name="resumeExperienceCity[]" data-comp="" id="<?php echo "resumeExperienceCity_" . $i; ?>" class="gui-input experienceCity" placeholder="City" value="<?php echo $value['resumeExperienceCity']; ?>">

My jQuery: 

$(".experienceCity").geocomplete({
    details: ".experienceDates",
    detailsAttribute: "data-comp"
});

Now the problem is, I have repeating fields using cloneya repeater. The problem is; when I have pre-populated data that creates multiple fields with data-comp attribute; geocomplete would try to duplicate value entered one field into all other fields with geo-comp. I don't know how to prevent this. I tried something like "data-comp:first" to limit the plugin from filling all the the other fields; but it doesn't work. 

Solution to any of the problems described above would help me fix the problem at hand.