引导输入预取功能答案

【问题标题】：Bootstrap typeahead prefetch functionality引导输入预取功能
【发布时间】：2013-07-23 10:11:03
【问题描述】：

所以我使用 Bootstraps typeahead API 来创建实时搜索。

source 参数很棒，因为它允许使用 AJAX 调用从服务器获取数据。但是，我希望能够在页面加载时“预取”源，并且只有在“预取”数据中没有匹配项时才执行 ajax 调用。

我怎样才能做到这一点？我的 ajax 调用在这里：

    $("#topsearchbar").typeahead({
        items: 8,
        source: function (query, process) {
            $.get( "/topsearchbar", {"data":query}, function(data) {
                process( data );
            });
        }
    });

【问题讨论】：

标签： javascript ajax twitter-bootstrap bootstrap-typeahead typeahead

【解决方案1】：

所以你真正想要的是缓存已经获取的数据。

var query_data = {};
$("#topsearchbar").typeahead({
    items: 8,
    source: function (query, process) {
        if (query_data[query] === undefined) {
            $.get( "/topsearchbar", {"data":query}, function(data) {
                query_data[query] = data;
                process( data );
            });
        } else {
            process(query_data[query]);
        }
    }
});

【讨论】：

这不是我想要的，我实际上是想预取数据，但是用 ajax 请求来做。我解决了，有兴趣可以看我的回答:)
附言。感谢您在这种情况下使用对象的提示

【解决方案2】：

嗯，这就是我最后的做法：

var Obj = {};
var Arr = [];
var preFetchResult = function (query, callback) {
    $.get( "/request", {"data":query}, function(data) {
        Obj = {};
        Arr = [];
        for (var i = 0; i < data.length; i++) {
            Arr.push( data[i].name );
            Obj[ data[i].id ] = data[i].name;
        }
        callback(Obj,Arr);
    });
};

$(window).load(function() {
    preFetchResult("", function(obj,arr) { // Empty query prefetches all db data
        $("#bar").typeahead({
            items: 8,
            source: function (query, process) {
                process(arr);
                $.get("/request", {"data":query}, function(data) {
                    for (var i = 0; i < data.results.length; i++) {
                        if (obj[data.results[i].id] === undefined) {
                            obj[data.results[i].id] = data.results[i].name;
                            arr.push(data.results[i].name);
                        }
                    }
                    process(arr);
                });
            }
        });
    });
});

【讨论】：