Question

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

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

我怎么能做到这一点？我的ajax电话在这里：

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

Answer 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]);
        }
    }
});

Answer 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);
                });
            }
        });
    });
});

Bootstrap预先取消预取功能

2 个答案: