我已经开始使用Typeahead.js,并且正在努力寻找一种允许用户键入和搜索公司名称的方法,一旦选择输入相关的公司代码即可。
.json文件:
[{
"company_name": "Facebook",
"code": "fb",
}, {
"company_name": "Google",
"code": "goog",
}, {
"company_name": "Yahoo",
"code": "yhoo",
}, {
"company_name": "Apple",
"code": "aapl",
}, {
"company_name": "Royal Mail",
"code": "rmg.l",
}]
.js脚本:
var stocks = new Bloodhound({
datumTokenizer: function(d) {
return Bloodhound.tokenizers.whitespace(d.code);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 3,
prefetch: {
url: 'javascripts/stockCodes.json',
filter: function(list) {
return $.map(list, function(stock) {
return {
code: stock
};
});
}
}
});
stocks.initialize();
$('.typeahead').typeahead(null, {
name: 'stocks',
displayKey: 'code',
source: stocks.ttAdapter()
});
当前,当用户在输入字段中键入时,这仅显示代码列表。但是,我想知道是否有一种方法可以让他们搜索
code
,但是一旦选择,文本框中的值就是company_name
吗?使用此插件是否有可能。任何帮助将不胜感激。谢谢!
最佳答案
displayKey
用于指示用户选择条目后,哪个键应显示在输入字段的下拉列表和中。
如果希望下拉列表中显示的条目的与输入字段中的不同,则需要使用自定义模板。
从documentation:
这样的事情应该起作用:
$('.typeahead').typeahead(null, {
name: 'stocks',
displayKey: 'company_name',
source: stocks.ttAdapter(),
templates: {
suggestion: function (stock) {
return '<p>' + stock.code + '</p>';
}
}
});
提交的模板将用于在下拉列表中显示
stock.code
,而stock.company_name
将在用户选择条目后显示在输入字段中。