使用SODA数据源的Bootstrap typeahead

Question

我尝试将bootstrap类型提前与数据源的SODA端点一起使用。SODA端点返回一个JSON数组，并且可以使用简单的查询字符串对其进行查询。

端点示例:取自：http://dev.socrata.com/consumers/getting-started/的https://soda.demo.socrata.com/resource/earthquakes.json?region=Washington

在本例中，Washington是用户可能在输入中键入的内容。

以Washington为例返回的JSON示例：[ { "region" : "Washington", "source" : "uw", "location" : { "needs_recoding" : false, "longitude" : "-120.0137", "latitude" : "47.3452" }, "magnitude" : "3.3", "number_of_stations" : "38", "datetime" : "2012-09-13T17:33:45", "earthquake_id" : "60451342", "depth" : "12.70", "version" : "1" } , { "region" : "Washington", "source" : "uw", "location" : { "needs_recoding" : false, "longitude" : "-122.4432", "latitude" : "46.5543" }, "magnitude" : "1.1", "number_of_stations" : "31", "datetime" : "2012-09-13T11:52:57", "earthquake_id" : "60451197", "depth" : "16.60", "version" : "2" } ]

如果JSON的格式很奇怪，我很抱歉。

到目前为止，我还无法让typeahead工作，也找不到关于如何检索此类数据的足够文档。

Answer 1

如果要在用户从选项中进行选择时调用url，可以使用updater

$("#sourceInput").typeahead({
   source:function(query,process){
      var url = 'https://soda.demo.socrata.com/resource/earthquakes.json?region=' + query;
      $.getJSON(url,function(resp){
        process(resp)
      });
   },
   updater: function(item){
      var url = 'https://soda.demo.socrata.com/resource/earthquakes.json?region=' + item;
      $.getJSON(url,function(resp){
        //do something with json response
      });
      //return the item for the input
      return item;
   }
});