如何引用引导程序类型的数据？

Question

This is my data:

var markers = {
        "example": {"lat": -83.68088192646843, "lng": -125.270751953125, "type": "town"},
        "anotherexample": {"lat": -58.1548020417031, "lng": -21.318115234375, "type": "town"}
}

How do I reference this source of data?

Edit:

The method is this:

$('.thing').typeahead({source: markers});

But that doesn't work and I think it's because markers isn't the correct syntax to select my markers object. What should I use instead?

Answer 1

You could try to serialize the object in some ways. In my example (jsfiddle) I concatenated each entry to obtain a certain string :

var markers_as_str = Array();
for(var index in markers) {
    var marker = markers[index];
    var str = index+" : "+marker.lat+" "+marker.lng+" "+marker.type;
    markers_as_str.push(str);
}

$('#strs').typeahead({
    source: markers_as_str
});

You could customize the matcher and sorter options to check specific properties. But you would have difficulties with the display of the choices, so you'd have to override the updater option. And all this would go a bit too far, as you may not need it.

Answer 2

I've used this:

names = []; 
for (var k in markers) {
    if (markers.hasOwnProperty(k)) {
        names.push(k);
    }
}

Answer 3

I wrote a blog post on the matter, How to use rich objects and typed objects with Bootstrap Typeahead . The key is typing your objects to some class which has a toString() method to serialize and a fromString() method to deserialize (to be used in the Bootstrap Typeahead updater function to reference an object of the original type). In my blog, I use UsState as an example:

UsState.prototype.toString = function() {
    return JSON.stringify(this);
};

UsState.fromString = function(serializedState) {
    return $.extend(new UsState(), JSON.parse(serializedState));
};

Then in the Typeahead definition for updater :

updater: function(state) {
    state = UsState.fromString(state);
    $stateMessage.html('<strong>' + state.name + '</strong> has ' + state.numElectoralVotes + ' electoral votes.');
    return state.name;
},

Note the definition of other Typeahead methods to handle your objects properly:

highlighter: function(state) {
    return $.fn.typeahead.Constructor.prototype.highlighter.call(this, state.name);
},