我如何从谷歌API抓取数据的自动完成领域在余烬

How do I grab data from a Google API for an autocomplete field in Ember

本文关键字：余烬 谷歌 API 数据 抓取      更新时间：2023-09-26

我的最终目标是在网站的主页上有一个文本字段，用于监听输入，并在每次击键时从Google的Places API获取数据，并将列表发布到主页。我目前正在尝试使用计算属性，但似乎遇到了绑定不等待API请求返回的问题。

我一直在阅读承诺，但我不确定如何将它们纳入我的控制器。

这是我当前的尝试:

App.IndexController = Ember.Controller.extend
  service: new google.maps.places.AutocompleteService()
  searchText: ''
  searchResults: (->
    # service = new google.maps.places.AutocompleteService()
    @get('service').getPlacePredictions({input: @get('searchText')}, (predictions, status)->
      console.log(predictions)
    )
  ).property('searchText')

控制台正确地记录结果，但是searchResults属性没有更新。

我的问题是如何在API请求成功后获得绑定更新，这是组织此逻辑的最佳方式吗?

我不确定Ember Data是否接受承诺作为属性的值，但您可以通过在RSVP承诺中包装google.maps.places.AutocompleteService响应来尝试测试。

这是另一个应该有效的解决方案。特别注意脂肪箭头和@set 

searchResults: (->
  @get('service').getPlacePredictions({input: @get('searchText')}, (predictions, status)=>
    @set('searchResults', predictions)
  )
).property('searchText')

根据Pooyan的提示，这是我最终的选择:

App.IndexController = Ember.Controller.extend
  service: new google.maps.places.AutocompleteService()
  searchText: ''
  results: null
  searchTextChanged: (->
    if @get('searchText').length
      @get('service').getPlacePredictions({input: @get('searchText')}, (predictions, status) =>
        console.log("update map here...")
        @set('results', predictions)
      )
    else
      @set('results', null)
  ).observes('searchText')
基本上，我使用了一个观察者来监视我的文本字段。当文本字段发生变化时，我们调用Google的服务来获取结果。然后将这些结果设置为results属性。
相关文章：