经过与Twitters typeahead.js的长期斗争之后,我终于可以决定将哪个模板用于我的建议。
但是,虽然这似乎是一个简单的过程,但我收到以下错误:
未捕获的TypeError:g.templates.suggestion不是函数
我的代码看起来像这样
HTML:
<input id = "search" type="text" placeholder="Colors">
使用Javascript:
var colors = ["red", "blue", "green", "yellow", "brown", "black"];
var colorsource = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
local: colors
});
$('#search').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'color',
source: colorsource,
templates: {
empty: [
'<div class="empty-message">',
'unable to find any Best Picture winners that match the current query',
'</div>'
].join('\n'),
suggestion: '<div>{{color}}</div>'
}
});
我已经看到了Handlebars.js用于编译模板的示例,但我打算在我的建议中使用Angular.js中的变量,所以我不想这样做。
关于如何解决这个问题的任何建议将不胜感激。
您的建议选项必须是返回HTML的函数,例如
...
suggestion: function(e) { return ('<div>' + e.value + '</div>'); }
...
我关注@potatopeelings,但建议没有出现。
这是我的代码
$(document).ready(function () {
$("#penilai").typeahead({
source: function (query, process) {
var countries = [];
map = {};
return $.post('/Evaluation/JsonSenaraiPenilai', { query: query }, function (data) {
$.each(data, function (i, country) {
map[country.Evaluator_name] = country;
countries.push(country.Evaluator_name);
});
process(countries);
});
},
templates: {
empty: [
'<div class="empty-message">',
'unable to find any Best Picture winners that match the current query',
'</div>'
].join('\n'),
suggestion: function (e) { return ('<div>' + e.Evaluator_name + '-' + e.Evalator_staf_no + '</div>'); }
},
updater: function (item) {
var selectedShortCode = map[item].Evalator_staf_no;
$("#evalutor").val(selectedShortCode);
return item;
}
});
});