使用JSON的Twitter Bootstrap typeahead

时间:2012-12-03 16:43:27

标签: json twitter-bootstrap

如何使用Twitter Bootstrap Typeahead和JSON。我的Bootstrap版本为 2.2.1

我的JSON回复

   [{"label":"Sistemski Administrator","value":"1"},{"label":"Jure Hotujec","value":"3"},{"label":" ","value":"4"},{"label":"Simona Jamnik","value":"5"},{"label":"Ma\u0161a Mu\u0161i\u010d","value":"6"},{"label":" ","value":"7"}]

我现在拥有的只是这个,但源必须是数组,在我的情况下它是JSON

$("#typeahead").autocomplete({
    soruce : soruce
});

此外,我想将它与模态元素一起使用,如果这会改变任何东西。

谢谢!

1 个答案:

答案 0 :(得分:3)

使用jQuery的parseJson方法,然后将其传递给typeahead的source参数。

var jsonString =  '[{"label":"Sistemski Administrator","value":"1"},{"label":"Jure Hotujec","value":"3"},{"label":" ","value":"4"},{"label":"Simona Jamnik","value":"5"},{"label":"Ma\u0161a Mu\u0161i\u010d","value":"6"},{"label":" ","value":"7"}]';
var jsonObj = $.parseJSON(jsonString);
var sourceArr = [];

for (var i=0; i<jsonObj.length; i++) {
  sourceArr.push(jsonObj[i].label);
}

$("#typeahead").typeahead({
    source : sourceArr
});

这是一个jsfiddle example.
有关详细信息,请查看typeahead docs.