javascript - 引导输入预取功能

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

Answer 2

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

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