我正在使用 Bootstrap 2.1.1 和 jQuery 1.8.1 并尝试使用 Typeahead 的功能。
我尝试显示一个标签并使用一个id,就像一个标准的<select />
这是我的预输入初始化:
$(':input.autocomplete').typeahead({
source: function (query, process) {
$('#autocompleteForm .query').val(query);
return $.get(
$('#autocompleteForm').attr('action')
, $('#autocompleteForm').serialize()
, function (data) {
return process(data);
}
);
}
});
这是我发送的 JSON 类型
[{"id":1,"label":"machin"},{"id":2,"label":"truc"}]
我怎么知道process()
显示我的标签并将所选 ID 存储在另一个隐藏字段中?
最佳答案
这里有一个很好的教程解释了如何做到这一点:http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/ (如果帖子的主要部分尚未反射(reflect),请阅读我在该页面上的评论)。
根据该教程和您提供的 JSON,您可以执行如下操作:
$(':input.autocomplete').typeahead({
source: function(query, process) {
objects = [];
map = {};
var data = [{"id":1,"label":"machin"},{"id":2,"label":"truc"}] // Or get your JSON dynamically and load it into this variable
$.each(data, function(i, object) {
map[object.label] = object;
objects.push(object.label);
});
process(objects);
},
updater: function(item) {
$('hiddenInputElement').val(map[item].id);
return item;
}
});
关于javascript - Twitter Bootstrap Typeahead - ID 和标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12389948/