Question

我正在尝试使用bootstrap typahead，使用SODA端点作为数据源。 SODA端点返回一个JSON数组，可以使用简单的查询字符串来查询它。

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

在这种情况下，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

如果您想在用户从选项中选择时调用该网址，则可以使用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;
   }
});

使用SODA数据源的Bootstrap typeahead

1 个答案: