How to replace the prefetch source in Bloodhound with an alternative to "real time"?

Question

I used Bloodhound with the prefetch[ docs ] option .

This works fine, except when I add content to a preloaded json file, it is not available as a search result unless I restart the browser.

Therefore, I try to ensure that the search results reflect the updated contents of the file in real time.

I tried just replacing prefetchwith remote, but this leads to the search function not working properly (this shows inconsistent results).

Below is the code I'm using with prefetch.

Version Information: typeahead.bundle.min.jsat v0.10.5.

function searchFunction() {
    var template =
        "<p class=\"class_one\">{{area}}</p><p class=\"class_two\">{{title}}</p><p class=\"class_three\">{{description}}</p>";
    var compiled_template = Hogan.compile(template);
    var dataSource = new Bloodhound({
        datumTokenizer: function(d) {
            return Bloodhound.tokenizers.whitespace(d.tokens.join(
                ' '));
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: '/static/my_file.json'
        # remote: '/search'
    });
    dataSource.initialize();
    $('.my_lookup .typeahead').typeahead({}, {
        source: dataSource.ttAdapter(),
        name: 'courses',
        displayKey: 'title',
        templates: {
            suggestion: compiled_template.render.bind(
                compiled_template)
        }
    }).focus().on('typeahead:selected', function(event, selection) {
        var title = selection.title
            // do things with the title variable
    });
}

Edit:

, , , json.

, :

• .
• .

:

• , .
• apple, a, p .., , Firebug: TypeError: data is null. .

, , Hogan :

{
    "matches": [{
        "tokens": ["apple", "orange"],
        "area": "Nautical",
        "_id": {
            "$oid": "4793765242f9d1337be3d538"
        },
        "title": "Boats",
        "description": "Here is a description"
    }, {
        "tokens": ["apple", "pineapple"],
        "area": "Aviation",
        "_id": {
            "$oid": "4793765242f9d1337be3d539"
        },
        "title": "Planes",
        "description": "Here is a description."
    }]
}

JS

function searchFunction() {

var engine = new Bloodhound({
    remote: {
        url: '/search?q=%QUERY%',
        wildcard: '%QUERY%'
    },
  datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
  queryTokenizer: Bloodhound.tokenizers.whitespace,

});

engine.initialize();

$('.my_lookup .typeahead').typeahead({
}, {
source: engine.ttAdapter(),
name: 'courses',
displayKey: 'title',
templates: {
suggestion: function (data) {
                return "// not sure how to apply markup to each match"
      }
}
}).focus().on('typeahead:selected', function(event, selection) { 
console.log(selection);
var title = "// again not sure how to access individual match data"
// do things with the title variable
});
}

MongoDB

: courses
: courses
:

{
    "_id" : ObjectId("4793765242f9d1337be3d538"),
    "tokens" : [ 
        "apple", 
        "orange"
    ],
    "area" : "Nautical",
    "title" : "Boats",
    "description" : "Here is a description."
}

:

{
    "_id" : ObjectId("4793765242f9d1337be3d539"),
    "tokens" : [ 
        "apple", 
        "pineapple"
    ],
    "area" : "Aviation",
    "title" : "Planes",
    "description" : "Here is a description."
}

..

Python ( Bottle )

@route('/search')
def search():
    """
    Query courses database for matches in tokens field.    
    """
    # get the query
    query  = request.GET.q
    # define the database
    dbname = 'courses'
    db = connection[dbname]
    # define the collection
    collection = db.courses
    # make the query
    matches = collection.find({"tokens":query})
    # send back results
    results = {}
    results['matches'] = matches
    response.content_type = 'application/json'
    return dumps(results)