title: Change displayed text returned by google Autocomplete API
body: <p>Currently I'm using the google autocomplete to enable users to search for cities. When typing <code>Ber</code> it shows up the following:</p>
  
  <p><img src="https://i.stack.imgur.com/SorP2.png" alt="screen while typing"></p>
  
  <p>which is perfectly fine.</p>
  
  <p>When selecting an element, e.g. the first one, the textbox-value switches to <code>Berlin, Deutschland</code> as it can be seen here:</p>
  
  <p><img src="https://i.stack.imgur.com/35FDW.png" alt="screen while selecting"></p>
  
  <p>When hitting enter or clicking the element, the text will stay the same:</p>
  
  <p><img src="https://i.stack.imgur.com/Ne4j5.png" alt="screen after selection"></p>
  
  <p>What I want is to only show the city's name <code>Berlin</code> in the textbox without the nation at the end.
  Is there any specific event I should bind to so I could crop the nation before it will be set in the textbox?</p>