我已经为Bootstrap的Typeahead中的建议定义了一个自定义模板,如下所述.但是当我选择任何建议时,我只输入国家名称.因为我已经在displayKey参数中传递了国家/地区.无论如何我可以在输入中选择国家和城市名称(与模板中的相同)？
这是JsFiddle：http://jsfiddle.net/geekowls/agrg3xhj/
我还阅读了Typeahead网站上的示例.但没有找到任何相关的东西.我所知道的是displayKey参数可以取一个函数.
$(document).ready(function () {
var dataSource = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country','city'),queryTokenizer: Bloodhound.tokenizers.whitespace,identify: function (obj) { return obj.country; },prefetch: "../Data/1.json"
});
function dataSourceS(q,sync) {
dataSource.search(q,sync);
}
$('.typeahead').typeahead( {
minLength: 0,highlight: true
},{
name: 'countries',displayKey: 'country',source: dataSourceS,templates: {
empty: [
'<div class="empty">No Matches Found</div>'
].join('\n'),suggestion: function (data){
return '<div>' + data.country + ' – ' + data.city + '</div>'
}
}
}
);
});
这是Json文件.
[
{
"country": "Holland","city": "Amsterdam"
},{
"country": "Belgium","city": "Brussel"
},{
"country": "Germany","city": "Berlin"
},{
"country": "France","city": "Paris"
}
]
解决方法
功能很简单.只需将显示参数更新为：
display: function(item){ return item.country+'–'+item.city}
还在这里更新了小提琴上的代码：
http://jsfiddle.net/geekowls/agrg3xhj/1/
干杯!
