Question

我正在尝试使用带有typeahead.js的自定义源（远程），并且在使事情正常工作时遇到一些麻烦。如果我对数据进行硬编码，那么事情就可以正常工作，但是当我尝试实现对远程服务的调用时，永远不会调用该调用，因此，永远不会检索数据来填充类型。

以下是代码：

var places = function(query, cb){
    $.getJSON({
        url: "https://api.foursquare.com/v2/venues/search?v=20120321&intent=global&query=%QUERY&client_id="+App.fs.client_id+"&client_secret="+App.fs.client_secret,        
        success: function(results){
            cb(results.response.venues);
        },
        error: function(){
             console.log("error");
        }
    });
};

$("#search").typeahead({
        highlight: true
    },
    {
        name: "Places",
        displayKey: "name",
        source: places
    }
);

如果我创建一个名为results的对象并手动构建数据，并将其传递给cb，那么一切正常。但是，通过此实现，甚至不会调用$.getJSON。我错过了什么？

谢谢！

Answer 1

事实证明，问题在于我如何实施$.getJSON。我认为该函数的签名是一个选项的哈希，但事实并非如此，它实际上是(url, [data], [success])。将其更改为正确的签名可以使事情有效。

感谢所有快速回复！

Answer 2

请注意，使用typeahead.js时，您无需手动加载数据。使用预取URL将获取pageload上的数据，然后存储在localStorage

中

$('#input').typeahead([
{
    name: 'places',
    prefetch: four_square_url_query,
}
]);

你的例子中的“地点”不是一个功能吗？怎么样：

var places;
 $.getJSON({
        url: fsquare_query,        
        success: function(results){
            places = results.response.venues;
        },
        error: function(){
             console.log("error");
        }
    });

我认为最近的typeahead没有“source”属性，而是“本地”属性。

Answer 3

我认为你可以这样做

var search = $("#search").typeahead({
    highlight: true,
    source: []
};

现在您可以使用asyncrouniuous请求从服务器

获取数据

$.getJSON({
    url: "https://api.foursquare.com/v2/venues/search?v=20120321&intent=global&query=%QUERY&client_id="+App.fs.client_id+"&client_secret="+App.fs.client_secret,        
    success: function(results){
        // some logic to filter, process results from server
        // now you can directly update typeahead source
        search.data('typeahead').source = results; 
    },
    error: function(){
         console.log("error");
    }
});

另请阅读this和this discussion

我也喜欢selectize.js图书馆，它有丰富的api，try it

无法使用typeahead.js实现自定义源

3 个答案: