Google Maps Automatische Vervollständigung Eingabeschlitz Ergebnis nur City Namen zu erhalten, aber nicht die volle Adresse

Question

Guten Tag,

ich eine Form mache, wo es zwei Eingangsschlitze: „Departure City“ und „Destination City“

ich benutze diese Lösung (nicht von mir gemacht) und ich denke, es Angular Lösung ist - http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview

<input type="text" id="Autocomplete" class="form-control" ng-autocomplete="result2" details="details2" options="options2"/> 

angular.module("Test", ['ngAutocomplete']) 
    .controller("TestCtrl",function ($scope) { 

    $scope.result2 = ''; 
    $scope.options2 = { 
     country: 'us', 
     types: '(cities)' 
    }; $scope.details2 = ''; 
    }); 

aber es gibt ein Problem - wo wir geben Dallas beginnen und wir haben eine Google-Vorschlag „Dallas, TX, United Zustände "und wenn wir bestätigen, wird die Eingabe auf" Dall "gesetzt wie, TX, USA "und ich brauche nur" Dallas "als Ergebnis im Eingabeschlitz.

Zum Beispiel: 1) müssen wir Departure City als Dallas 2) wir geben „dall“ beginnen, und wir haben eine Liste mit Vorschlägen von Google 3) wir ein am 1. klicken - Dallas, TX, USA und 4) in unserem Eingabeschlitz haben wir „Dallas“, aber nicht „Dallas, TX, USA“, wie jetzt bei der heutigen Stand dieses Dienstes

Wirklich ich nicht, wie diese Lösung aktualisieren (http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview) zu machen, dass in meiner Art arbeiten.

Answer 1

Die getPlace() gibt diese Struktur:

{"address_components":[{"long_name":"Dallas","short_name":"Dallas","types":["locality","political"]},{"long_name":"Dallas County","short_name":"Dallas County","types":["administrative_area_level_2","political"]},{"long_name":"Texas","short_name":"TX","types":["administrative_area_level_1","political"]},{"long_name":"United States","short_name":"US","types":["country","political"]}],"adr_address":"<span class=\"locality\">Dallas</span>, <span class=\"region\">TX</span>, <span class=\"country-name\">USA</span>","formatted_address":"Dallas, TX, USA","geometry":{"location":{"lat":32.7766642,"lng":-96.79698789999998},"viewport":{"south":32.617537,"west":-96.99894130000001,"north":33.0237921,"east":-96.46373790000001}},"icon":"https://maps.gstatic.com/mapfiles/place_api/icons/geocode-71.png","id":"fa589a36153613fc17b0ebaebbea7c1e31ca62f0","name":"Dallas","photos":[{"height":2322,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/103240547556009569847/photos\">Robert Rogers</a>"],"width":4128},{"height":728,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/103202508011395907641/photos\">Blake Margolis RowlettSachseScanner</a>"],"width":1440},{"height":1579,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/110350056655658805900/photos\">Ramil Soy</a>"],"width":2807},{"height":2366,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/111265500346815453367/photos\">Wolfgang Demino</a>"],"width":3619},{"height":4387,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/103960188949347184478/photos\">Thang Tran</a>"],"width":6000},{"height":2304,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/117980955401126505428/photos\">Nymisha Bandi</a>"],"width":4096},{"height":2221,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/113732984326979786649/photos\">Volkan Yuksel</a>"],"width":5692},{"height":665,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/101875825735695083663/photos\">Accounting Department</a>"],"width":1000},{"height":3519,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/102844598608092286357/photos\">LCP360 Production</a>"],"width":5760},{"height":1152,"html_attributions":["<a href=\"https://maps.google.com/maps/contrib/105626597651962458040/photos\">K. Osgood</a>"],"width":2048}],"place_id":"ChIJS5dFe_cZTIYRj2dH9qSb7Lk","reference":"CnRsAAAAd4lD76ntfuCVsOakSCHjeWZEdxuVIKsnv86z3u9Fq1A12QTRvj6SSS4O4ZE9Apvq_wWT8r4ux3lT8FDvIDD6EWNKHiUVyhhxw-1yMClXawE20mV8_xPGXz2UKPoKSSbZmqH1rzlIqVTuOeKMt_5OBRIQLtW-4AspRKSG4Mv_fEbrERoUrJyRcYEoY4CbwPyC77PXO70_1_c","scope":"GOOGLE","types":["locality","political"],"url":"https://maps.google.com/?q=Dallas,+TX,+USA&ftid=0x864c19f77b45974b:0xb9ec9ba4f647678f","utc_offset":-300,"vicinity":"Dallas","html_attributions":[]} 

So konnten wir leicht die Details analysieren zu bekommen, was Sie wollen.

Heres eine Gabel des ursprünglichen Beispiels, das nur den kurzen Namen zum Beispiel zeigt. http://plnkr.co/edit/6egntT9xl4eZVJg6HoWj?p=preview

Setzen Sie dann den Elementwert auf die .name anstelle des Ergebnisses.

Plunker wurde aktualisiert

Edits

In der newAutoComplete Funktion bemerken ich heraus nur die Zeile, die das Textfeld in den formatierten String aus dem Autocomplete-Dienst einstellt.

//scope.ngAutocomplete = element.val(); // the formatted string is in the text box. 
scope.ngAutocomplete = scope.details.name; // we just want the name field. 
element[0].value = scope.details.name; // you could use other parts of the object above if need be. 

Answer 2

corn3lius danke viel. Jetzt funktioniert es genau so, wie ich es brauche! Kannst du erklären, was das Problem war und was du in Plunker aktualisiert hast, damit es so funktioniert?