如何引用bootstrap-typeahead的数据？

Question

这是我的数据：

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

如何引用此数据源？

编辑：

方法是这样的：

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

但这不起作用，我认为这是因为markers不是选择我的标记对象的正确语法。我应该用什么来代替呢？

Answer 1

我使用了这个：

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

Answer 2

您可以尝试以某种方式序列化对象。在我的example (jsfiddle)中，我连接了每个条目以获得特定的字符串：

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

您可以自定义matcher和sorter选项以检查特定属性。但是在显示选项时会有困难，所以必须覆盖updater选项。所有这些都有点过头了，因为你可能不需要它。

Answer 3

我写了一篇关于这件事的博文，How to use rich objects and typed objects with Bootstrap Typeahead。关键是将您的对象键入某个类，该类有一个要序列化的toString()方法和一个要反序列化的fromString()方法(将在Bootstrap Typeahead updater函数中使用，以引用原始类型的对象)。在我的博客中，我以UsState为例：

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

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

然后在updater的Typeahead定义中

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

请注意正确处理对象的其他Typeahead方法的定义：

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