javascript - 如何让 Typeahead.js 使用对象的一个​​字段而不是全部字段自动完成或选择？

Question

我目前有以下代码来设置 Typeahead:

var people = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace("personName"),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: generateCastDb()
});

$('#app-container .search-box').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
{
    name: 'people',
    source: people,
    templates: {
        suggestion: function (data) {
            return '<p>' + data["personName"] + '</p>';
        }
    }
});

generateCastDb 返回与此类似的对象数组:

{personId: "293", personName: "Roger Pratt", appearances: [{mediaId: "11834", mediaType: "movie", characterName: "Man Living in Barrel"}]}

如您所见，我使用此 personName 字段来实现 Typeahead 的自动完成建议。下拉列表显示得非常好，但是当我选择其中一个选项(使用箭头键或鼠标)时，整个对象会出现在输入框中，而不仅仅是 personName 值。

如何仅使用该一个字段而不是整个对象来更新搜索框？我尝试使用 jQuery.val() 在 typeahead:selected 事件触发时设置它，但它不起作用。

Answer 1

您缺少 displayKey 属性

$('#app-container .search-box').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  }, {
    name: 'people',
    source: people,
    displayKey: 'personName', // <---- this noe
    templates: {
      suggestion: function(data) {
        return '<p>' + data["personName"] + '</p>';
      }
    }
  });
});

displayKey也可以这样替换为display

display: function(item){
    return item.personName;
}