我正在使用bootstrap typeahead进行搜索:
$('.lookup').typeahead({
source: function (query, process) {
return $.getJSON(
'json_autocomplete.php',{ query: query },
function (data) {
var newData = [];
$.each(data, function(){
newData.push(this.label);
//populate hidden field with id
$('#contact_id').val(this.id);
});
return process(newData);
});
}
});
JSON数据如下所示:
[{"label":"Contact: Jeff Busch-> Busch, Jeff: 1975-11-24","value":"Busch, Jeff","id":"2096"}, ...
工作得很好。当用户开始键入“标签”时,数据显示在输入下的列表中。但是,一旦用户点击其中一个列表项,我希望“值”文本出现在输入文本框中,而不是所有搜索到的标签信息!
这可能吗?
这是一个小提琴:
答案 0 :(得分:12)
我强烈建议您升级到 https://github.com/bassjobsen/Bootstrap-3-Typeahead 这是完全同样好的旧引导程序2.x typeahead,只是在自己的存储库中进行维护和修复因为bootstrap 3.0跳过了typeahead有利于typeahead.js
(根本不再维护BTW)。这将使您的生活更轻松。
之后你可以跳过所有的扭曲,只需这样做:
$('#contact').typeahead( {
source: jsonData,
displayText: function(item) {
return item.label
},
afterSelect: function(item) {
this.$element[0].value = item.value
}
})
更新小提琴 - >的 http://jsfiddle.net/qdgo651h/1/ 强>
每条评论更新。我相信你过分复杂source
部分
$('.lookup').typeahead({
displayText: function(item) {
return item.label
},
afterSelect: function(item) {
this.$element[0].value = item.value
},
source: function (query, process) {
return $.getJSON('json_autocomplete.php', { query: query }, function(data) {
process(data)
})
}
})
应该这样做。从以下评论中更新了小提琴 - >的 http://jsfiddle.net/hwbnhbdd/1/ 强> 您可以在更新中使用 http://myjson.com/ 作为小提琴中的AJAX来源。
答案 1 :(得分:0)
只需返回updater事件的数据,如下所示:
updater: function (item) {
$('#id').val(map[item].id);
//Here we return the text to display on the input control
return map[item].autocomplete;
},