【发布时间】：2015-01-13 16:30:05
【问题描述】：
我一定是个白痴。我正在使用Typeahead.js 插件。我正在尝试使用自定义模板来提供建议。当我的自定义模板出现时，我无法使用箭头键实际选择一个项目。如果我将鼠标悬停在某个项目上，则选择也不会突出显示。我认为这可能只是一个样式问题。但是，如果出现 3 个建议，并且我单击两次向下箭头，然后输入，我选择的选项不会出现在文本框中。或者，如果我用鼠标选择一个选项，该选项不会出现在框中。
我做错了什么？目前，我有以下内容：
var suggestions = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/api/suggests?querytext=%QUERY',
filter: function(results) {
return $.map(results.Results, function(suggestion) {
return suggestion;
});
}
});
suggestions.initialize();
$(document).ready(function() {
$('input.typeahead').typeahead(
{ minLength: 3 },
{
name: 'suggestions',
source: suggestions.ttAdapter(),
templates: {
suggestion: function(data) {
var str = '';
if (data.Type === 'Customer') {
str += '<i class="icon-1"></i>';
} else if (data.Type === 'Product') {
str += '<i class="icon-2"></i>';
}
str += '<div>' + data.Name + '</div>';
return str;
}
}
}
);
});
建议弹出窗口。结果来自以下 JSON：
{
"Results":[
{
"Type":"Customer",
"Id":5,
"Name":"Bill",
"LastUpdated":"01-01-2015"
},
{
"Type":"Customer",
"Id":135,
"Name":"Billows",
"LastUpdated":"01-02-2015",
},
{
"Type":"Product",
"Id":241,
"Name":"Bill Check",
"LastUpdate":"01-04-2015"
}
],
"TotalResults":3,
"TotalCustomers":2,
"TotalProducts":1
}
我该怎么做被选中了吗？
谢谢！
【问题讨论】：
-
你可以尝试设置一个小提琴来演示这个问题吗？
-
请不要使用小提琴——所以这些天已经建立了这种能力。
-
没有
valueKey属性，现在称为displayKey，您绝对应该设置为Name属性。因此，您需要将其添加到您的 typeahead 配置中：displayKey: 'Name',否则 typeahead 使用默认值value所以在您的情况下，因为您没有value属性，它在选择时不会显示任何内容。这应该可以解决选择问题，但不能解决悬停问题...
标签： javascript jquery typeahead.js