Question

美好的一天，

我正在制作一个有2个输入槽的表格：＆＃34;离境城市＆＃34;和＆＃34;目的地城市＆＃34;

我使用那个解决方案（不是由我完成），我想这是Angular解决方案 - 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 = '';
  });

但是有一个问题 - 我们开始输入达拉斯，我们得到了谷歌的建议＆＃34;达拉斯，德克萨斯州，美国＆＃34;如果我们点击确认输入设置为＆＃34;达拉斯，德克萨斯州，美国＆＃34;我只需要＆＃34;达拉斯＆＃34;因此在输入槽中。

例如： 1）我们需要离开城市作为达拉斯 2）我们开始输入＆＃34; dall＆＃34;我们得到了谷歌的一系列建议 3）我们点击第一个 - 达拉斯，德克萨斯州，美国和 4）在我们的输入槽中，我们得到了达拉斯＆＃34;但不是＆＃34;达拉斯，德克萨斯州，美国＆＃34;现在就是目前的服务状态

真的，我不知道如何更新该解决方案（http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview）以使其按我的方式工作。

Answer 1

getPlace()返回此结构：

{"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":[]}

因此，我们可以轻松地解析细节以获得您想要的内容。

这是原始样本的一个分支，例如只显示短名称。 http://plnkr.co/edit/6egntT9xl4eZVJg6HoWj?p=preview

然后将元素值设置为.name而不是结果。

Plunker已更新

<强>编辑

在newAutoComplete函数中，我刚刚注释了将文本框设置为autoComplete服务的格式化字符串的行。

//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非常感谢。现在它可以根据我的需要灵活运作！你能解释一下问题是什么吗？你在Plunker中更新了什么来让它以这种方式工作？

Google地图自动填充仅获取输入广告位结果城市名称但不是完整地址

2 个答案: